¿Cómo mostrar imágenes Base64 en HTML?

Tengo problemas para mostrar una imagen Base64 en línea.

¿Puede alguien indicarme la dirección correcta?

<!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
Pregunta editada 7º enero 2017 в 7:28
Programación
image html base64 inline
14º diciembre 2011 в 4:53
17 vistas
Solución

Mi sospecha es, por supuesto, los datos reales en base64, por lo demás me parece bien. Vea [este fiddle][1] donde un esquema similar funciona. Puede intentar especificar el conjunto de caracteres.

begin snippet: js hide: false console: true babel: false -->

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

Puedes probar este decodificador base64 para ver si tus datos base64 son correctos o no.

Ruslan López
Respuesta editada 3º julio 2019 в 9:57
Comentarios (7)

Debe especificar correctamente el tipo de contenido, la codificación del contenido y el conjunto de caracteres como

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

según la sintaxis del esquema URI de datos:

 data:[][;charset=][;base64],
bcag2
Respuesta editada 11º septiembre 2019 в 12:12
Comentarios (4)

El carácter + que aparece en un URI de datos debe codificarse como %2B. Esto es como la codificación de cualquier otra cadena en un URI. Por ejemplo, los separadores de argumentos (? y &) deben codificarse cuando un URI con un argumento se envía como parte de otro URI.

Comentarios (0)