ケース例
Data URL 入力
入力: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
操作: 画像 → Base64 実行後に `data:image/png;base64,` を付与。
出力: Image preview rendered and ready to download
画像を Base64 / Data URL で内蔵する
小さな画像をページ内に埋め込む用途で、Base64 と Data URL の使い分けを整理できます。
適した入力タイプ
- Data URL 化したい PNG/JPG/SVG ファイル
- 確認したい Data URL 文字列
- 接頭辞なしの生 Base64 画像文字列
手順
- 画像ワークスペースでファイルをアップロードします。
- 出力をコピーし、必要なら Data URL 接頭辞を付与します。
- HTML/CSS に貼り付けて表示を確認します。
このシナリオでよくある問題
接頭辞のタイプ不一致
表示されない場合は data:image/;base64, の type と実ファイルが一致しているか確認。
ファイルが大きすぎる
Base64 内蔵は小容量向けです。大きい画像は通常 URL 配信の方が適切です。
SVG が表示されない
`image/svg+xml` を使い、SVG 本文が有効な XML か確認してください。