html - 画像のソースで data:image/png とはどういう意味ですか?

Question

私は Symfony を使用しており、1 つのテンプレートのイメージのソースでこれを見つけました。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABUElEQVQoz2NgAIJ29iBdD0d7X2cPb+tY2f9MDMjgP2O2hKu7vS8CBlisZUNSMJ3fxRMkXO61wm2ue6I3iB1q8Z8ZriDZFCS03fm/wX+1/xp/TBo8QPxeqf+MUAW+QIFKj/+q/wX/c/3n/i/6Qd/bx943z/Q/K1SBI1D9fKv/AhCn/Wf5L5EHdFGKw39OqAIXoPpOMziX4T9/DFBBnuN/HqhAEtCKCNf/XDA/rZRyAmrpsvrPDVUw3wrkqCiLaewg6TohX1d7X0ffs5r/OaAKfinmgt3t4ulr4+Xg4ANip3j+l/zPArNT4LNOD0pAgWCSOUIBy3+h/+pXbBa5tni0eMx23+/mB1YSYnENroT5Pw/QSOX/mkCo+l/jgo0v2KJA643s8PgAmsMBDCbu/5xALHPB2husxN9uCzsDOgAq5kAoaZVnYMCh5Ky1r88Eh/+iABM8jUk7ClYIAAAAAElFTkSuQmCC" alt="Search on Symfony website" />

それは何を意味し、独自のコードを作成する方法は?

ありがとう。

Answer 1

これは URI スキーム (Uniform Resource Identifier スキーム) であり、データを外部リソースであるかのように Web ページにインラインで含める方法を提供します。

詳細については、 http://en.wikipedia.org/wiki/Data_URI_schemeを参照してください。

ここで独自にエンコードできます。

http://webcodertools.com/imagetobase64converter

Answer 2

これは、ページに直接埋め込まれたbase64 でエンコードされた画像です。独自に生成したい場合はbase64、Linux システムのユーティリティがこれを行います。

base64 image.png

その文字列をイメージタグにコピーするだけです。

<img src="data:image/png;base64,LONGSTRINGOFASCIICHARACTERS" alt="..." />

Answer 3

これはデータ URI スキームであり、リソースの実際のコンテンツを (リソースを見つける場所ではなく) URI で提供する方法です。

リンクされたウィキペディアのページにそれらを生成する方法のサンプルコードがありますが、提供したサンプルでわかるように、生成するのは非常に簡単です。MIME タイプ、使用されるエンコーディング、そしてコンテンツを指定します。

Answer 4

これは「data uri スキーム」の URL です。