Googleストリートビュー画像付きフェザーライト

Question

Googleストリートビュー画像をフェッチし、フェザーライトを使用してライトボックスに表示しようとしています。画像は、ユーザが選択した地図アイコンに基づいて動的に定義される。

イメージは問題なく表示されますが、ライトボックスは1秒間フリーズしてから、イメージがテキストとして読み取ろうとしたかのようにランダムな文字のページを返します。次のように

私のコードの例は次のとおりです。私はよくあなたの問題を理解している場合

let streetView_imgURL = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + 
    props.Latitude + "," + props.Longitude + "&key=MYKEY"; 

document.getElementById("selectedSchool").innerHTML = (props ? 
"<div class='imgbox'>" + 
    "<img style='width:100%;' data-featherlight='" + streetView_imgURL + "'src='" 
    + streetView_imgURL + "'>" 

Answer 1

、これを試してみてください。 http://jsfiddle.net/markovica/1njee7ah/2/

<style>.gsv-screenshot {display: none}</style>  
<a href=".gsv-screenshot" class="" data-featherlight>Click Me</a> 
<div class="lightbox gsv-screenshot"> 
    <i class="featherlight-close fa fa-close"></i> 
    <img style='width:100%;' src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.8165107,20.4603276"> 
</div> 

はアイテムをこのように生成するための方法を見つけます。それは問題がないようです。