Wie kann ich PNG-Bilder ohne externe Dateien direkt in HTML einbetten?

PNG-Bilder in HTML-Seiten einbetten

Die Aufgabe, ein PNG-Bild in eine HTML-Seite einzubetten, ohne auf die Bilddatei zu verlinken, wirft die Frage auf : Wie integriere ich die Bilddaten direkt in den HTML-Code?

Einbettung mit Base64-Kodierung

Base64-Kodierung bietet eine Lösung zum Einbetten von Bildern in HTML. Es sind verschiedene Online-Base64-Encoder verfügbar, es wird jedoch empfohlen, einen robusten Encoder wie den unter http://www.greywyvern.com/code/php/binary2base64 zu verwenden.

Dieses Tool bietet zwei primäre Einbettungsoptionen : Verwenden von CSS oder dem Tag.

CSS-Einbettung

In CSS kann die Einbettung wie folgt erreicht werden:

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

Tag-Einbettung

Alternativ kann das Tag kann verwendet werden:

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

Durch die Verwendung der Base64-Kodierung können Sie PNG-Bilder direkt in HTML-Seiten einbetten und so die Anzeige von Bildern ermöglichen, ohne dass externe Bilddateien erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich PNG-Bilder ohne externe Dateien direkt in HTML einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!