外部ファイルを使用せずに PNG 画像を HTML に直接埋め込む方法

HTML ページへの PNG 画像の埋め込み

画像ファイルにリンクせずに PNG 画像を HTML ページに埋め込むタスクでは、次のような疑問が生じます。 : 画像データを HTML に直接組み込む方法?

Base64 エンコーディングによる埋め込み

Base64 エンコーディングは、HTML に画像を埋め込むためのソリューションを提供します。さまざまなオンライン Base64 エンコーダが利用可能ですが、http://www.greywyvern.com/code/php/binary2base64 にあるような堅牢なエンコーダを使用することをお勧めします。

このツールは 2 つの主要な埋め込みオプションを提供します。 : CSS または を使用します。 tag.

CSS の埋め込み

CSS では、次のように埋め込みを実現できます。

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

タグの埋め込み

または、

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

Base64 エンコーディングを利用すると、PNG 画像を HTML ページに直接埋め込むことができ、外部の画像ファイルを必要とせずに画像を表示できます。

以上が外部ファイルを使用せずに PNG 画像を HTML に直接埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。