Base64形式の画像を表示する

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;
});

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。