Featherlight with google street view images

Question

I am trying to fetch Google Street View images and display them in a light box using featherlight. The images are defined dynamically based on which map icon a user selects.

My image displays without issue but the lightbox freezes for a second and then returns a page of random characters as if the image has been attempted to read as text.

An example of my code is as follows:

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

If I understood your issue well, try this: 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>

find a way to generate items this way. It doesn't seem to have issues.