Der URL-Wert des SRC- oder CSS-Hintergrundbilds ist Base64-Codierungscode_HTML/Xhtml_Webseitenproduktion

Möglicherweise ist Ihnen aufgefallen, dass auf die URL einiger Bilder auf der Webseite eine lange Zeichenfolge folgt, z. B.: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i. 1Bu qFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==. Was ist das also? Dies ist das Daten-URI-Schema.

Das Daten-URI-Schema ist in RFC2397 definiert. Der Zweck besteht darin, einige kleine Daten direkt in Webseiten einzubetten, sodass sie nicht aus externen Dateien geladen werden müssen. Bei der obigen Zeichenfolge handelt es sich beispielsweise tatsächlich um ein kleines Bild. Kopieren Sie diese Zeichen, fügen Sie sie in die Adressleiste von Firefox ein und rufen Sie sie auf. Sie sehen ein 1x36 großes PNG-Bild in Weiß und Grau.

Im obigen Daten-URI stellt „data“ den Protokollnamen zum Abrufen von Daten dar, „image/png“ ist der Name des Datentyps, „base64“ ist die Codierungsmethode der Daten und was auf das Komma folgt, sind die Base64-codierten Daten der Bild-/PNG-Datei.

Derzeit werden vom Daten-URI-Schema folgende Typen unterstützt:
Daten:, Textdaten
Daten:text/plain, Textdaten
Daten:text/html, HTML-Code
data :text/html;base64,base64-codierter HTML-Code
data:text/css,CSS-Code
data:text/css;base64,base64-codierter CSS-Code
data: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
Daten :image/jpeg;base64, base64-codierte JPEG-Bilddaten
data:image/x-icon;base64, base64-codierte Symbolbilddaten

base64 übersetzt einfach einige 8-Bit-Daten in den Standard Es gibt viele kostenlose Base64-Kodierungs- und Dekodierungstools in PHP, z. B. echo base64_encode(file_get_contents('wg.png')); Die Browser IE8, Firfox, Chrome und Opera unterstützen alle diese Einbettung kleiner Dateien.


Als Beispiel für ein Bild:
Ein Bild auf einer Webseite kann so angezeigt werden:

Code kopierenDer Code lautet wie folgt: /KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiO v8CDADlIUQBs7MD3wAAAABJRU 5ErkJggg==“/>