Comprensión de los problemas de visualización de imágenes con MySQL BLOB

Al intentar mostrar una imagen almacenada como BLOB en una base de datos MySQL, los desarrolladores a menudo encuentran un problema en el que el texto se repite antes o después de que el encabezado de la imagen haga que la imagen se muestre incorrectamente.

Causa del problema

El problema surge porque el navegador web interpreta cualquier texto repetido fuera del flujo de datos de la imagen como parte de la imagen. Esto se debe al hecho de que los datos del encabezado y de la imagen deben entregarse continuamente y sin interrupción.

Solución

Para mostrar otros elementos y la imagen juntos sin interrupción, puede convertir los datos de la imagen en base64 e incrustarlo dentro de una etiqueta . Este enfoque le permite incluir texto y otros elementos en la salida HTML sin dejar de mostrar la imagen.

Aquí hay una versión revisada del código:

echo '';
echo 'Hello world.';

Nota: Si bien esta solución le permite mostrar tanto la imagen como otro texto, no es ideal porque no se puede almacenar en caché y puede ser lenta en dispositivos móviles. . Considere consultar la documentación de caniuse para obtener más información sobre los URI de datos.