imagen - ¿Cómo mostrar imágenes base64 en HTML?

mostrar imagen base64 javascript (10)

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

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

De acuerdo con la sintaxis del esquema URI de datos :

data:[<media type>][;charset=<character set>][;base64],<data>

Consulte también http://danielmclaren.com/node/90

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

¿Alguien me puede apuntar en 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...'' /> </body> </html>

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

Esto mostrará la imagen de los datos de la base 64:

<style> .logo { width: 290px; height: 63px; background: url(data:image/png;base64,copy-paste-base64-data-here) no-repeat; } </style> <div class="logo"/>

Lo que hice fue finalizar la url con img.jpg para evitar el almacenamiento en caché y perder la capacidad de comprobar si un cliente ha abierto un correo electrónico, la URL completa se parece a " http://midomain.com/<Random letters numbers>/img.jpg "

Usando cosas aleatorias como parte de la URL, Google no almacenará en caché la imagen. La parte importante es finalizar la URL con un nombre de imagen válido con la extensión.

Este es mi código de Symfony (creo que también será bueno para PHP) para enviar la imagen.

$im = imagecreatetruecolor(1,1); $white = imagecolorallocate($im, 255, 255, 255); imagesetpixel ($im , 0 , 0 , $white); header(''Content-Type: image/jpeg''); // Output the image imagejpeg($im); // Free up memory imagedestroy($im); exit;

La exit es muy importante, para que PHP no envíe nada más.

Mi sospechoso es, por supuesto, datos reales de base64, de lo contrario me parece bien. Vea este violín donde está funcionando un esquema similar. Puede intentar especificar el conjunto de caracteres.

<div> <p>Taken from wikpedia</p> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> </div>

Puede probar este decodificador base64 para ver si sus datos base64 son correctos o no.

Parece que hay algún error en su URL de datos.

Puede usar esta herramienta en línea para la codificación / decodificación de base64 para codificar sus imágenes para incrustarlas: http://base64online.org/encode/

Marque la opción "Formatear como URL de datos" para formatear los datos base64 como URL.

Primero convierta su imagen a Base64 (codifique a Base64). Puedes hacerlo en línea o con un script PHP.

Después de convertir obtendrá el resultado como

iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=

Ahora es fácil de usar.

Solo debes colocarlo en el src de la imagen y definirlo allí, ya que está en formato codificado en base64.

Ejemplo:

Prueba este también:

let base64="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; let buffer=Uint8Array.from(atob(base64), c => c.charCodeAt(0)); let blob=new Blob([buffer], { type: "image/gif" }); let url=URL.createObjectURL(blob); let img=document.createElement("img"); img.src=url; document.body.appendChild(img);

No recomendado para producción ya que solo es compatible con navegadores modernos.

Usted puede poner sus datos directamente en una declaración de URL como

src = ''url(imageData)'' ;

y para obtener los datos de imagen u puede utilizar la función php

$imageContent = file_get_contents("imageDir/".$imgName); $imageData = base64_encode($imageContent);

para que pueda copiar, pegar el valor de imageData y pegarlo directamente en su url y asignarlo al atributo src de su imagen

puedes usar esto

$image = ''http://images.itracki.com/2011/06/favicon.png''; // Read image path, convert to base64 encoding $imageData = base64_encode(file_get_contents($image)); // Format the image SRC: data:{mime};base64,{data}; $src = ''data: ''.mime_content_type($image).'';base64,''.$imageData; // Echo out a sample image echo ''<img src="''.$src.''">'';