Compreendendo problemas de exibição de imagens com MySQL BLOB

Ao tentar exibir uma imagem armazenada como um BLOB em um banco de dados MySQL, os desenvolvedores geralmente encontram um problema em que qualquer texto ecoa antes ou depois que o cabeçalho da imagem faz com que a imagem seja exibida incorretamente.

Causa do problema

O problema surge porque o navegador da web interpreta qualquer texto ecoado fora do fluxo de dados da imagem como parte da imagem. Isso se deve ao fato de que os dados do cabeçalho e da imagem devem ser entregues continuamente e sem interrupção.

Solução

Para exibir outros itens e a imagem juntos sem interrupção, você pode converter os dados da imagem em base64 e incorpore-o em uma tag . Essa abordagem permite incluir texto e outros elementos na saída HTML enquanto ainda exibe a imagem.

Aqui está uma versão revisada do código:

echo '';
echo 'Hello world.';

Nota: Embora esta solução permita exibir a imagem e outro texto, não é ideal porque não pode ser armazenada em cache e pode ser lenta em dispositivos móveis . Considere verificar a documentação do caniuse para obter mais informações sobre URIs de dados.