Exibir imagens Base64 em HTML

1. Use a tag img para exibir a imagem Base64 em HTML
2. Use a função PHP base64_encode() para exibir a imagem em Base64 usando HTML

Este tutorial apresentará métodos para exibir imagens base64 em HTML. A imagem Base64 é uma string legível convertida pelo algoritmo de codificação base64.

Use a tag img para exibir a imagem Base64 em HTML

Podemos usar a tag img para incorporar imagens codificadas com Base64 em um documento HTML. É útil porque a página carrega mais rápido porque o navegador não precisa fazer solicitações adicionais de carregamento de página para imagens menores. Podemos especificar o URL da imagem no atributo src da tag img. Podemos exibir imagens base64 fornecendo as informações sobre a imagem no atributo src. Precisamos definir o tipo de conteúdo preciso, codificação de conteúdo e conjunto de caracteres no atributo src. A sintaxe é mostrada abaixo.

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

Podemos especificar o tipo de conteúdo como image/png, indicando que a string é uma imagem PNG. Então, podemos especificar o conjunto de caracteres como base64. Um ponto e vírgula separa o tipo de conteúdo e o conjunto de caracteres. Depois disso, podemos especificar a string base64 da imagem. Podemos usar ferramentas como esta para converter uma imagem em uma imagem base64. Também podemos criar uma imagem base64 personalizada a partir do link aqui. Dessa forma, podemos usar a tag img para exibir a imagem base64 em HTML.

Código de exemplo:

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

Use a função PHP base64_encode() para exibir a imagem em Base64 usando HTML

Podemos usar a função PHP base64_encode() para codificar uma imagem em uma string de base64. A função mime_content_type() retorna o tipo de conteúdo dos dados fornecidos a ela. Usando essas funções, podemos gerar um src para a tag img. Assim, podemos exibir a imagem base64. Podemos usar a função file_get_contents() para ler a imagem que será convertida em string base64.

Por exemplo, crie uma variável $img e armazene um URL de uma imagem. Em seguida, use a função file_get_contents() para ler a imagem e use a função base64_encode() para converter a imagem em uma string base64. Em seguida, use a função mime_content_type() na variável img para obter o tipo de conteúdo. Em seguida, crie uma variável imgSrc e organize as variáveis ​​de acordo com a sintaxe acima. Finalmente, use a função echo para exibir a tag HTML img onde o atributo src é definido como a variável imgSrc.

Assim, podemos usar o PHP para exibir imagens base64.

Código de exemplo:

$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 . '">';