Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

Möglicherweise ist Ihnen aufgefallen, dass auf die Quell- oder CSS-Hintergrundbild-URLs einiger Bilder im Internet eine lange Zeichenfolge folgt, z. B.: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D. Also, was ist das? Dies ist das Daten-URI-Schema.

Das Data-URI-Schema ist in RFC2397 definiert. Sein Zweck besteht darin, kleine Daten direkt in eine Webseite einzubetten, ohne sie aus einer externen Datei laden zu müssen. Beispielsweise ist die Zeichenfolge oben eigentlich ein kleines Bild. Kopieren Sie diese Zeichen, fügen Sie sie in die Adressleiste von Firefox ein und öffnen Sie sie. Dann können Sie sie sehen: ein 1 x 36 großes weiß-graues PNG-Bild.

In der obigen Daten-URI stellt „data“ den Protokollnamen zum Abrufen der Daten dar, „image/png“ ist der Datentypname, „base64“ ist die Datencodierungsmethode und die „data“ nach dem Komma sind die Base64-codierten Daten der „image/png“-Datei.

Derzeit unterstützt das Daten-URI-Schema die folgenden Typen:
Daten: Textdaten
Daten: Text/Plain, Textdaten
Daten: Text/HTML, HTML-Code
data:text/html;base64, Base64-codierter HTML-Code
Daten: Text/CSS, CSS-Code
data:text/css;base64, Base64-codierter CSS-Code
Daten:Text/Javascript,Javascript-Code
data:text/javascript;base64, Base64-codierter Javascript-Code
data:image/gif;base64, Base64-codierte GIF-Bilddaten
data:image/png;base64, Base64-codierte PNG-Bilddaten
data:image/jpeg;base64, Base64-codierte JPEG-Bilddaten
data:image/x-icon;base64, Base64-codierte Symbolbilddaten

Einfach ausgedrückt übersetzt base64 einige 8-Bit-Daten in Standard-ASCII-Zeichen. Im Internet gibt es viele kostenlose Base64-Codierungs- und Decodierungstools. In PHP können Sie zum Codieren die Funktion base64_encode() verwenden, z. B. echo base64_encode(file_get_contents('wg.png'));
Derzeit unterstützen die Browser IE8, Firefox, Chrome und Opera diese Art der Einbettung kleiner Dateien.

Nehmen wir ein Beispielbild:

Ein Bild auf einer Webseite kann folgendermaßen angezeigt werden:
<img src="upload/2022/web/wg.png"/>
Es kann auch folgendermaßen angezeigt werden:

Code kopieren

Der Code lautet wie folgt:

Den Inhalt der Bilddatei schreiben wir direkt in die HTML-Datei. Der Vorteil dabei ist, dass wir uns einen HTTP-Request sparen. Der Nachteil besteht darin, dass der Browser solche Bilder nicht zwischenspeichert. Sie können je nach aktueller Situation freie Entscheidungen treffen.

<<: So ändern Sie Flash-SWF-Dateien in Webseiten

>>: MySQL-Anweisung zum Abrufen aller Daten oder Monate in einem angegebenen Zeitraum (ohne Festlegen gespeicherter Prozeduren oder Hinzufügen von Tabellen)

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

Remote-Entwicklung mit VSCode und SSH

Zusammenfassung der Erfahrungen und Fähigkeiten von Webdesignern beim Erlernen von Webdesign

jQuery implementiert einen einfachen Karusselleffekt

So ändern Sie Flash-SWF-Dateien in Webseiten

MySQL-Anmeldefehler beheben: „Zugriff für Benutzer ‚root‘@‚localhost‘ verweigert“

Detaillierte Erläuterung gängiger Methoden von JavaScript Array

Vue-Grundlagen MVVM, Vorlagensyntax und Datenbindung

So erstellen Sie mit Photoshop ein Web-Drahtgittermodell

Eine kurze Diskussion über die Matching-Regeln von Host und Benutzer, wenn Mysql eine Verbindung zur Datenbank herstellt

Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

Artikel empfehlen

Grundsätze und Nutzungsdetails für MySQL 8.0-Benutzer- und Rollenverwaltung

CSS setzt die Höhe des Box-Containers (div) immer auf 100 %

Probleme mit dem benannten Mount und dem anonymen Mount des Docker-Container-Datenvolumens

Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten

Beispiel für die Anzeige von Bildjalousien mit reinem CSS

Verwenden Sie CSS, um einige häufig auftretende seltsame Schaltflächen einfach zu implementieren

Beispielcode für die Verwendung von CSS zum Schreiben eines strukturierten Hintergrundbilds mit Farbverlauf

Problem mit der V-HTML-Rendering-Komponente

VUE implementiert einen Beispielcode für das Spiel Flappy Bird

WeChat-Applet + ECharts zur Realisierung eines dynamischen Aktualisierungsprozesses

So importieren Sie schnell Daten in MySQL

Docker installiert MySQL und löst das chinesische verstümmelte Problem

Regeln für die Gestaltung des Anmeldeformulars

Beispiel für einen WeChat-Applet-Rechner

Die häufigste Deklarationszusammenführung in TS (Schnittstellenzusammenführung)