JavaScript

最終更新日:
公開日:

レシピ

画像

Base64形式の画像を表示する

Base64形式で画像を指定して表示する方法について解説します。

この記事のポイント

  • base64形式の画像ファイルはimg要素src属性に「data:image/png;base64,画像ファイルのデータ」をセットして表示
  • 画像ファイルの形式によってMIMEタイプの指定を変更する

Base64形式の画像ファイルをimg要素にセットする

Base64形式の画像ファイルは通常の画像ファイルと同じようにimg要素src属性にセットすると表示することができます。
ただし、パスの代わりに以下のようなフォーマットに沿ってセットする必要があります。

HTML コード例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU ... 5ErkJggg==" alt="Bear" width="200">

内訳は「data:」「MIMEタイプ;」「base64,」「Base64形式のデータ」が順に並んだものになります。
このうち、「data:」「base64,」は固定ですが、「MIMEタイプ;」「Base64形式のデータ」は表示する画像ファイルによって異なります。

MIMEタイプはJPEG形式は「image/jpeg」、PNG形式は「image/png」、GIF形式は「image/gif」、SVG形式は「image/svg+xml」です。

あとはJavaScriptを使って上の4つの値を文字列として結合して、src属性にセットすれば画像として表示されます。

以下の例はページが読み込まれたときに、PNG形式の画像ファイルをimg要素src属性にセットして表示します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){
	let img_element = document.querySelector("img");
	let img_base64_content = "iVBORw0KGgoAAAANSU ... 5ErkJggg==";
	img_element.src = "data:image/png;base64," + img_base64_content;
});