Maison  >  Article  >  développement back-end  >  Comment puis-je intégrer des images PNG directement dans HTML ?

Comment puis-je intégrer des images PNG directement dans HTML ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-29 09:42:30751parcourir

How Can I Embed PNG Images Directly into HTML?

Intégrer des images PNG directement dans HTML

L'intégration d'images PNG dans HTML permet un affichage direct dans le navigateur sans référencement de fichier externe. Pour y parvenir, utilisez la technique d'encodage Base64 :

Encodez en Base64 l'image PNG :

Utilisez des encodeurs en ligne pour convertir l'image PNG en une chaîne Base64. Cette chaîne représente les données d'image binaires au format texte.

Incorporer la chaîne Base64 dans HTML :

Option CSS :

Définissez une classe CSS pour l'image et définissez la propriété background-image à l'aide de la fonction url() et de la chaîne Base64. Par exemple :

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

Option de balise d'image :

Vous pouvez également intégrer la chaîne Base64 directement dans le fichier tag :

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

Cela convertit l'image PNG en un schéma d'URI de données, qui permet au navigateur d'interpréter et d'afficher l'image directement.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn