Maison  >  Article  >  développement back-end  >  Comment intégrer une image .png directement dans un document HTML sans lien vers un fichier externe ?

Comment intégrer une image .png directement dans un document HTML sans lien vers un fichier externe ?

DDD
DDDoriginal
2024-10-28 21:30:30471parcourir

How to embed a .png image directly into an HTML document without linking to an external file?

Intégrer une image .png dans une page HTML

Comment intégrer un fichier .png dans un document "file.html" vierge afin que l'image s'affiche lorsque le fichier est ouvert dans n'importe quel navigateur, sans lien vers celui-ci à partir du code HTML ?

Réponse :

Pour intégrer une image dans HTML sans liaison, utilisez des encodeurs Base64 en ligne. Une option recommandée est http://www.greywyvern.com/code/php/binary2base64.

Il existe deux méthodes principales pour intégrer l'image :

  • CSS :
div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}
  • Balise :
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" />

Dans les deux cas, remplacez avec la sortie de l'encodeur Base64.

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