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)

CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

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

CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

Zwei Möglichkeiten zum korrekten Bereinigen von MySQL-Binlog-Protokollen

Detailliertes Tutorial zum Upgrade von Zabbix Monitoring 4.4 auf 5.0

Erste Schritte mit dem Animieren von SVG-Pfadstrichen mit CSS3

So ändern Sie die Apt-Get-Quelle in Ubuntu 18.04

Zusammenfassung der JavaScript-Timertypen

Detaillierte Erklärung des VUE-Reaktionsprinzips

Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code

Artikel empfehlen

Detaillierte Erklärung des Vue-Lebenszyklus

Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python

Entpackte Version der MySQL-Installation und aufgetretene Fehler und Lösungen

Analyse des Docker-Compose-Image-Release-Prozesses des Springboot-Projekts

Implementierungscode für die bidirektionale Kommunikation zwischen Node und Python

Centos7.5 installiert die Bereitstellung des binären Pakets mysql5.7.24

Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils

Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten

Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Detaillierte Analyse der MySQL-Sperrblockierung

Beispielcode zur Trennung von Front-End und Back-End mit FastApi+Vue+LayUI

Beispieltest MySQL-Enumerationstyp

Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript

Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben

Lösung für das 404-Problem der Tomcat-Installation in Docker