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>
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>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
Puedes probar este decodificador base64 para ver si tus datos base64 son correctos o no.
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:[<media type>][;charset=<character set>][;base64],<data>
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.