srcまたはcssの背景画像のURL値はbase64エンコード code_HTML/Xhtml

srcまたはcssの背景画像のURL値はbase64エンコード code_HTML/Xhtml_Webページ制作

WBOY

リリース： 2016-05-16 16:39:50

オリジナル

1730 人が閲覧しました

Web ページ上の一部の画像の URL の後に、data:image/png;base64、iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i などの長い文字列が続いていることに気づいたかもしれません。 qFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==。それで、これは何ですか？これはデータ URI スキームです。

データ URI スキームは RFC2397 で定義されており、その目的は、外部ファイルからロードする必要がないように、いくつかの小さなデータを Web ページに直接埋め込むことです。たとえば、上の文字列は実際には小さな画像です。これらの文字をコピーして Firefox のアドレスバーに貼り付け、そこに移動すると、1X36 の白とグレーの PNG 画像が表示されます。

上記のData URIにおいて、dataはデータを取得するためのプロトコル名、image/pngはデータ型名、base64はデータのエンコード方式、カンマ以降はbase64でエンコードされたデータを表します。画像/png ファイルの。

現在、データ URI スキームでサポートされているタイプは次のとおりです:
data:、テキストデータ
data:text/plain、テキストデータ
data:text/html、HTML コード
データ:text/html;base64,base64 エンコードされた HTML コード
データ:text/css,CSS コード
データ:text/css;base64,base64 エンコードされた CSS コード
データ:text/javascript,JavaScript コード
data:text/javascript;base64,base64 エンコードされた JavaScript コード
data:image/gif;base64,base64 エンコードされた gif 画像データ
data:image/png;base64,base64 エンコードされた PNG 画像データ
データ:image/jpeg;base64、base64 でエンコードされた jpeg 画像データ
data:image/x-icon;base64、base64 でエンコードされたアイコン画像データ

base64 は単に 8 ビットデータを標準に変換します。 ASCII 文字。PHP では、base64_encode() 関数を使用してエンコードできます。現在、 IE8、Filfox、Chrome、および Opera ブラウザーはすべて、この小さなファイルの埋め込みをサポートしています。

画像の例:
Web ページ上の画像は次のように表示できます:

コードは次のとおりです。 /KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CD ADlIUQBs7MD3wAAABJRU 5ErkJggg==”/> 画像ファイルを置きます HTMLファイルに直接内容を記述します。それは HTTP リクエストを保存することです。欠点は、ブラウザーがそのような画像をキャッシュしないことです。誰もが実際の状況に基づいて自由に選択することができます。