[解決済み] バイト配列で保存された画像をHTML/JavaScriptで表示するには？

2023-02-03 03:44:22

質問

HTML/JavaScriptでWebページを書いています。AJAXを使用して、バックエンドから画像をダウンロードしています。画像はURLではなく生のバイト配列として表現されるので、私は標準的な <img src="{url}"> のアプローチは使えません。

言及された画像をユーザーに表示するにはどうすればよいですか？

このHTMLスニペットを、サーブされた文書に挿入してみてください。

<img id="ItemPreview" src="">

次に、JavaScript側で、動的に画像の src 属性に、いわゆるデータURL .

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

または、jQueryを使用する。

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

これは、画像がPNGフォーマットで保存されていることを想定しています。もし他の画像形式（例えばJPEG）を使っている場合は MIME タイプ ( "image/..." の部分) を URL に適宜追加してください。

似たような質問