Comment afficher des images Base64 en HTML ?

J'ai des difficultés à afficher une image Base64 en ligne.

Quelqu'un peut-il m'indiquer la bonne direction ?

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
       src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
  </body>
</html>
dda
Question modifiée 7 janvier 2017 в 7:28
Programmation
image html base64 inline
14 décembre 2011 в 4:53
16 vues
Solution

Je soupçonne bien sûr les données en base64, mais sinon, tout me semble correct. Voir [this fiddle][1] où un schéma similaire fonctionne. Vous pouvez essayer de spécifier le jeu de caractères.

<div>
  <p>Taken from wikpedia</p>
  ![Red dot](data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==)
</div>

Vous pouvez essayer [ce décodeur base64][2] pour voir si vos données base64 sont correctes ou non.

[1] : http://jsfiddle.net/hpP45/ [2] : http://www.opinionatedgeek.com/dotnet/tools/base64decode/

Ruslan López
Réponse modifiée 3 juillet 2019 в 9:57
Commentaires (7)

Vous devez spécifier correctement le type de contenu, le codage de contenu et le jeu de caractères. comme

 data:image/jpeg;charset=utf-8;base64,

conformément à la syntaxe du [schéma URI des données][1] :

 data:[][;charset=][;base64],

[1] : https://en.wikipedia.org/wiki/Data_URI_scheme#Syntax

bcag2
Réponse modifiée 11 septembre 2019 в 12:12
Commentaires (4)

Le caractère + apparaissant dans un URI de données doit être codé comme %2B. Cela revient à coder toute autre chaîne dans un URI. Par exemple, les séparateurs d'arguments ( ? et &amp ;) doivent être encodés lorsqu'un URI avec un argument est envoyé comme partie d'un autre URI.

Commentaires (0)