web-dev-qa-db-fra.com

Utiliser la chaîne Base64 de l'URL dans la balise src de l'image

J'ai un service qui renvoie la version base64 d'une image. Maintenant, je veux utiliser la chaîne base64 dans la balise src d'une img. Le service propose la version base64 sous http://localhost:8080/file/301/base64.

La chaîne base64 ressemble à ceci:

data:image/gif;base64,iVBORw0KGgo ...

Ma balise img sur la page ressemble actuellement à ceci:

<img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">

Existe-t-il un moyen de faire fonctionner cela?

7
Thomas Schmidt

Cela ne fonctionne pas, car vous traitez une page contenant une chaîne d'URL de données, comme s'il s'agissait simplement d'un autre type de ressource d'image pouvant être liée par un lien externe. Malheureusement, la liaison à un élément externe fonctionne pour les fichiers image, mais les URL de données sont conçues comme une alternative à un lien externe et ne fonctionnent donc pas de la même manière.

En bref, pour afficher une image utilisant une chaîne d'URL de données, vous devez placer la chaîne d'URL de données réelle comme src= valeur, dans votre cas par exemple:

<img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

Exemples

Exemple HTML de Masinter, 1998 RFC 2397 - Le schéma d'URL "data" :

<IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry">
10
clarity123

RI de données est un schéma d'URI, pas un format de fichier image. Lorsque vous utilisez src="http://...", le schéma est http, pas data, le navigateur attend que la réponse soit une image, ce qui signifie que le corps de la réponse doit être les octets de l'image, pas la version base64.

vous pouvez donc: 1. renvoyer simplement les octets de l'image du serveur au lieu de base64 2. utiliser ajax pour charger la version base64 du serveur, puis définir l'attribut src de l'image avec lui.

3
wong2