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

PNG-Bilder in HTML-Seiten einbetten

Im digitalen Bereich spielen Bilder eine entscheidende Rolle bei der Verbesserung des Benutzererlebnisses und der Vermittlung visueller Informationen. Eine häufige Frage, mit der sich Webentwickler konfrontiert sehen, ist, wie man ein Portable Network Graphics (PNG)-Bild direkt in eine HTML-Seite einbettet, ohne extern darauf zu verlinken.

Einbetten von Bildern mit Base64-Kodierung

Um ein PNG-Bild in HTML einzubetten, können wir die Base64-Kodierung verwenden. Dieser Prozess wandelt binäre Bilddaten in eine Zeichenfolge um, die in den HTML-Code eingebettet werden kann.

Mehrere Online-Base64-Encoder können bei dieser Aufgabe helfen. Ein empfohlenes Tool finden Sie unter http://www.greywyvern.com/code/php/binary2base64.

Nachdem Sie das Bild codiert haben, können Sie es mit einer von zwei Methoden einbetten:

1. Verwenden der CSS-Eigenschaft „Hintergrundbild“:

Erstellen Sie ein div-Element und legen Sie seine Eigenschaft „Hintergrundbild“ auf die Base64-codierte Zeichenfolge fest. Zum Beispiel:

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

2. Mit der Funktion Tag:

Alternativ können Sie das Tag, um das Bild direkt einzubetten. Das src-Attribut nimmt die codierte Zeichenfolge als Wert an. Zum Beispiel:

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

Mit diesen Methoden können Sie PNG-Bilder erfolgreich in HTML-Seiten einbetten, sodass sie ohne externe Dateiverweise angezeigt werden können.

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