Base64-Bilder in HTML anzeigen

1. Verwenden Sie das Tag img, um das Base64-Bild in HTML anzuzeigen
2. Verwenden Sie die PHP-Funktion base64_encode(), um ein Base64-Bild mit HTML anzuzeigen

In diesem Tutorial werden Methoden zum Anzeigen von base64-Bildern in HTML vorgestellt. Base64-Bild ist eine lesbare Zeichenkette, die vom base64-Codierungsalgorithmus konvertiert wird.

Verwenden Sie das Tag img, um das Base64-Bild in HTML anzuzeigen

Mit dem Tag img können wir mit Base64 kodierte Bilder in ein HTML-Dokument einbetten. Dies ist nützlich, da die Seite schneller geladen wird, da der Browser keine zusätzlichen Seitenladeanforderungen für kleinere Bilder stellen muss. Wir können die URL des Bildes im src-Attribut des img-Tags angeben. Wir können base64-Bilder anzeigen, indem wir die Informationen über das Bild im Attribut src angeben. Wir müssen den genauen Inhaltstyp, die Inhaltscodierung und den Zeichensatz im Attribut src definieren. Die Syntax ist unten dargestellt.

data:[content-type][;charset],<data>

Wir können den Inhaltstyp als image/png angeben, was darauf hinweist, dass die Zeichenkette ein PNG-Bild ist. Dann können wir den Zeichensatz als base64 angeben. Ein Semikolon trennt den Inhaltstyp und den Zeichensatz. Danach können wir den base64-String des Bildes angeben. Wir können Tools wie diese verwenden, um ein Bild in ein base64-Bild zu konvertieren. Wir können auch ein benutzerdefiniertes base64-Bild aus dem Link hier erstellen. Auf diese Weise können wir das img-Tag verwenden, um das base64-Bild in HTML anzuzeigen.

Beispielcode:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg=="> 

Verwenden Sie die PHP-Funktion base64_encode(), um ein Base64-Bild mit HTML anzuzeigen

Wir können die PHP-Funktion base64_encode() verwenden, um ein Bild in einen base64-String zu kodieren. Die Funktion mime_content_type() gibt den Inhaltstyp der ihr bereitgestellten Daten zurück. Mit diesen Funktionen können wir ein src für das img-Tag generieren. Somit können wir das base64-Image anzeigen. Mit der Funktion file_get_contents() können wir das Bild auslesen, das in einen base64-String umgewandelt werden soll.

Erstellen Sie beispielsweise eine Variable $img und speichern Sie eine URL eines Bildes. Als nächstes verwenden Sie die Funktion file_get_contents(), um das Bild zu lesen und verwenden Sie die Funktion base64_encode(), um das Bild in einen base64-String zu konvertieren. Als nächstes verwenden Sie die Funktion mime_content_type() auf der Variable img, um den Inhaltstyp zu erhalten. Erstellen Sie dann eine Variable imgSrc und ordnen Sie die Variablen gemäss obiger Syntax an. Verwenden Sie schließlich die Funktion echo, um das HTML-Tag img anzuzeigen, wobei das Attribut src auf die Variable $ImgSrc gesetzt ist.

Daher können wir PHP verwenden, um base64-Bilder anzuzeigen.

Beispielcode:

$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';