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:<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D"/> 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
Artikel empfehlen
Einführung in bedingte Zugriffsattribute und Pfeilfunktionen in JavaScript
Inhaltsverzeichnis 1. Bedingte Zugriffsattribute ...
Analyse von MySQL-Lock-Wait- und Deadlock-Problemen
Inhaltsverzeichnis Vorwort: 1. Verstehen Sie Lock...
Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt
Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...
Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren
Egal, ob Sie zu Hause auf dem Sofa oder draußen i...
Beispielcode zur Implementierung der Anmeldung mit Bestätigungscode in der SMS-API in Node
1. Node-Server einrichten + Datenbankverbindung D...
Tutorial zur Verwendung von Profilen in MySQL
Was ist ein Profil? Wir können es verwenden, wenn...
So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus
Phänomen: Führen Sie ein Image aus, zum Beispiel ...
Ein Artikel zum Verständnis der Verwendung von Proxys in JavaScript
Inhaltsverzeichnis Was ist ein Agent Grundkenntni...
Schritte zum Erstellen eines CentOS-Containers über Docker
Inhaltsverzeichnis Vorwort Erstellen Sie ein Brüc...
Methode zur Optimierung von MySQL-Gruppenabfragen
MySQL behandelt GROUP BY- und DISTINCT-Abfragen i...
Implementierung der Vue-Anmeldefunktion
Inhaltsverzeichnis Vorne geschrieben Anmeldeübers...
Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac
Inhaltsverzeichnis Installieren Sie MySQL Konfigu...
Mysql 5.6.37 Winx64-Installation Dual-Version MySQL-Hinweise
Wenn MySQL Version 5.0 bereits auf dem Computer v...
CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18
Unter Bezugnahme auf die Online-Informationen hab...
XHTML verwendet einige veraltete Elemente in HTML nicht mehr
Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...