Mostrar imágenes Base64 en HTML

1. Utilice la etiqueta img para mostrar la imagen Base64 en HTML
2. Utilice la función PHP base64_encode() para mostrar la imagen Base64 usando HTML

Este tutorial presentará métodos para mostrar imágenes base64 en HTML. La imagen Base64 es una cadena legible convertida por el algoritmo de codificación base64.

Utilice la etiqueta img para mostrar la imagen Base64 en HTML

Podemos usar la etiqueta img para incrustar imágenes codificadas con Base64 en un documento HTML. Es útil porque la página se carga más rápido porque el navegador no necesita realizar solicitudes de carga de página adicionales para imágenes más pequeñas. Podemos especificar la URL de la imagen en el atributo src de la etiqueta img. Podemos mostrar imágenes base64 proporcionando la información sobre la imagen en el atributo src. Necesitamos definir el tipo de contenido, la codificación de contenido y el juego de caracteres precisos en el atributo src. La sintaxis se muestra a continuación.

data:[content-type][;charset],<data>

Podemos especificar el tipo de contenido como image/png, indicando que la cadena es una imagen PNG. Luego, podemos especificar el juego de caracteres como base64. Un punto y coma separa el tipo de contenido y el juego de caracteres. Después de eso, podemos especificar la cadena base64 de la imagen. Podemos usar herramientas como esta para convertir una imagen en una imagen base64. También podemos crear una imagen base64 personalizada desde el enlace aquí De esta manera, podemos usar la etiqueta img para mostrar la imagen base64 en HTML.

Código de ejemplo:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg=="> 

Utilice la función PHP base64_encode() para mostrar la imagen Base64 usando HTML

Podemos usar la función PHP base64_encode() para codificar una imagen en una cadena base64. La función mime_content_type() devuelve el tipo de contenido de los datos que se le proporcionan. Usando estas funciones, podemos generar un src para la etiqueta img. Por lo tanto, podemos mostrar la imagen base64. Podemos usar la función file_get_contents() para leer la imagen que se va a convertir en una cadena base64.

Por ejemplo, cree una variable $img y almacene la URL de una imagen. A continuación, utilice la función file_get_contents() para leer la imagen y utilice la función base64_encode() para convertir la imagen en una cadena base64. A continuación, utilice la función mime_content_type() en la variable img para obtener el tipo de contenido. Luego, cree una variable imgSrc y organice las variables de acuerdo con la sintaxis anterior. Finalmente, use la función echo para mostrar la etiqueta HTML img donde el atributo src se establece en la variable $ImgSrc.

Por lo tanto, podemos usar PHP para mostrar imágenes base64.

Código de ejemplo:

$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';