Afficher les images Base64 en HTML

1. Utilisez la balise img pour afficher l’image Base64 en HTML
2. Utilisez la fonction PHP base64_encode() pour afficher une image Base64 à l’aide de HTML

Ce tutoriel présentera des méthodes pour afficher des images base64 en HTML. L’image Base64 est une chaîne lisible convertie par l’algorithme de codage base64.

Utilisez la balise img pour afficher l’image Base64 en HTML

On peut utiliser la balise img pour intégrer des images encodées en Base64 dans un document HTML. C’est utile car la page se charge plus rapidement car le navigateur n’a pas besoin de faire des demandes de chargement de page supplémentaires pour les images plus petites. On peut préciser l’URL de l’image dans l’attribut src de la balise img. On peut afficher des images base64 en fournissant les informations sur l’image dans l’attribut src. Nous devons définir le type de contenu précis, l’encodage de contenu et le jeu de caractères dans l’attribut src. La syntaxe est indiquée ci-dessous.

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

Nous pouvons spécifier le type de contenu comme image/png, indiquant que la chaîne est une image PNG. Ensuite, nous pouvons spécifier le jeu de caractères comme base64. Un point-virgule sépare le type de contenu et le jeu de caractères. Après cela, nous pouvons spécifier la chaîne base64 de l’image. Nous pouvons utiliser des outils comme ceci pour convertir une image en une image base64. Nous pouvons également créer une image base64 personnalisée à partir du lien ici. De cette façon, nous pouvons utiliser la balise img pour afficher l’image base64 en HTML.

Exemple de code :

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

Utilisez la fonction PHP base64_encode() pour afficher une image Base64 à l’aide de HTML

Nous pouvons utiliser la fonction PHP base64_encode() pour encoder une image en chaîne base64. La fonction mime_content_type() renvoie le type de contenu des données qui lui sont fournies. En utilisant ces fonctions, nous pouvons générer un src pour la balise img. Ainsi, nous pouvons afficher l’image en base64. Nous pouvons utiliser la fonction file_get_contents() pour lire l’image qui doit être convertie en chaîne base64.

Par exemple, créez une variable $img et stockez l’URL d’une image. Ensuite, utilisez la fonction file_get_contents() pour lire l’image et utilisez la fonction base64_encode() pour convertir l’image en une chaîne base64. Ensuite, utilisez la fonction mime_content_type() sur la variable img pour obtenir le type de contenu. Ensuite, créez une variable imgSrc et organisez les variables selon la syntaxe ci-dessus. Enfin, utilisez la fonction echo pour afficher la balise HTML img où l’attribut src est défini sur la variable $ImgSrc.

Ainsi, nous pouvons utiliser PHP pour afficher des images en base64.

Exemple de code :

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