Comment intégrer des images PNG directement dans HTML sans fichiers externes ?

Intégrer des images PNG dans des pages HTML

La tâche d'intégrer une image PNG dans une page HTML sans créer de lien vers le fichier image soulève la question : comment incorporer les données d'image directement dans le HTML ?

Intégration avec l'encodage Base64

L'encodage Base64 fournit une solution pour intégrer des images dans HTML. Il existe différents encodeurs Base64 en ligne, mais il est recommandé d'en utiliser un robuste comme celui trouvé sur http://www.greywyvern.com/code/php/binary2base64.

Cet outil présente deux options d'intégration principales. : en utilisant CSS ou le tag.

Intégration CSS

En CSS, l'intégration peut être réalisée comme suit :

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

Incorporation de balises

Alternativement, l'option La balise peut être utilisée :

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

En utilisant l'encodage Base64, vous pouvez intégrer des images PNG directement dans des pages HTML, permettant l'affichage d'images sans avoir besoin de fichiers d'images externes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!