Featherlight avec google street view images

Question

J'essaie d'aller chercher des images de Google Street View et de les afficher dans une boîte à lumière à l'aide de plumes. Les images sont définies dynamiquement en fonction de l'icône de carte sélectionnée par l'utilisateur.

Mon image s'affiche sans problème mais la lightbox se bloque pendant une seconde et renvoie une page de caractères aléatoires comme si l'image avait été tentée de lire en tant que texte.

Un exemple de mon code est le suivant:

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

Si je comprends bien votre question, essayez ceci: 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> 

trouver un moyen de générer des éléments de cette façon. Cela ne semble pas avoir de problèmes.