Wie kann ich PNG-Bilder direkt in HTML einbetten?

PNG-Bilder direkt in HTML integrieren

Das Einbetten von PNG-Bildern in HTML ermöglicht die direkte Anzeige im Browser ohne externe Dateireferenzierung. Um dies zu erreichen, verwenden Sie die Base64-Kodierungstechnik:

Base64-Kodierung des PNG-Bildes:

Verwenden Sie Online-Encoder, um das PNG-Bild in eine Base64-Zeichenfolge zu konvertieren. Diese Zeichenfolge stellt die binären Bilddaten im Textformat dar.

Base64-Zeichenfolge in HTML integrieren:

CSS-Option:

Definieren Sie eine CSS-Klasse für das Bild und legen Sie die Eigenschaft „Hintergrundbild“ mithilfe der Funktion url() und der Base64-Zeichenfolge fest. Zum Beispiel:

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

Bild-Tag-Option:

Alternativ können Sie die Base64-Zeichenfolge direkt in das einbetten. tag:

<code class="html"><img src="/static/imghwm/default1.png" data-src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" class="lazy" alt="My Image"></code>

Dadurch wird das PNG-Bild in ein Daten-URI-Schema konvertiert, das es dem Browser ermöglicht, das Bild direkt zu interpretieren und anzuzeigen.

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