Base64形式の画像をHTMLで表示するには？

Base64の画像をインラインで表示するのに苦労しています。

誰か正しい方法を教えてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
       src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
  </body>
</html>
dda
編集された質問 7日 1月 2017 в 7:28
プログラミング
image html base64 inline
14日 12月 2011 в 4:53
18 ビュー
ソリューション

私が疑っているのは、もちろん実際のBase64データですが、それ以外は問題なさそうです。同じような仕組みで動いている [this fiddle][1] を見てください。char setを指定してみてはいかがでしょうか。

<div>
  <p>Taken from wikpedia</p>
  ![Red dot](data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==)
</div>

base64データが正しいかどうかは、このbase64デコーダを試してみると良いでしょう。

Ruslan López
編集した答え 3日 7月 2019 в 9:57
解説 (7)

正しいContent-type, Content-encoding, charsetを指定する必要があります。 のような

 data:image/jpeg;charset=utf-8;base64,

data URI scheme]1の構文に従って、{{116798}}のように正しいContent-type、Content-encoding、charsetを指定する必要があります。

 data:[][;charset=][;base64],
bcag2
編集した答え 11日 9月 2019 в 12:12
解説 (4)

データURIで発生する+文字は、%2Bとしてエンコードする必要があります。これは、URI内の他の文字列をエンコードするのと同じです。例えば、引数を持つURIが他のURIの一部として送信される場合には、引数のセパレータ(? and &)をエンコードする必要があります。

解説 (0)