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)

Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten

Detaillierte Erläuterung des Problems, dass die Synchronisierung des Warehouse-Cache nach dem Ändern der Yum-Quelle in CentOS8 fehlschlägt

Artikel

Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

Artikel

Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert

Die in Baidu-Interviews gestellten Fragen müssen ...

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

Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten

Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join

Detaillierte Erläuterung zum Erreichen einer hohen Verfügbarkeit von Eureka durch Docker und Docker-Compose

Neue Verwendung von watch und watchEffect in Vue 3

Informationen zur Nginx-GZIP-Konfiguration

Mysql-Indextypen und grundlegende Anwendungsbeispiele

Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung

Zwei Möglichkeiten zum Erstellen eines privaten GitLab mit Docker

Detaillierte Erläuterung des Problems, dass die Synchronisierung des Warehouse-Cache nach dem Ändern der Yum-Quelle in CentOS8 fehlschlägt

Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

Artikel empfehlen

Detaillierte Erläuterung der Transaktionsisolationsebenen in den MySql-Studiennotizen

Zusammenfassung mehrerer wichtiger Methoden zur Berechnung und Optimierung des Leistungsindex für MySQL

Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac

Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren

HTML-Grundlagen: Die grundlegende Struktur von HTML

So handhaben Sie lange Daten bei der Anzeige in HTML

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert

Beispielcode zur Implementierung der MySQL-Master-Slave-Replikation in Docker

html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens

Bei der kostenlosen Installationsversion von MySQL 5.7.19 sind Fallstricke aufgetreten (Sammlung)

So verwenden Sie rsync unter Linux

MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken

Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux

Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme