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>
私が疑っているのは、もちろん実際のBase64データですが、それ以外は問題なさそうです。同じような仕組みで動いている [this fiddle][1] を見てください。char setを指定してみてはいかがでしょうか。
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
base64データが正しいかどうかは、このbase64デコーダを試してみると良いでしょう。
正しいContent-type, Content-encoding, charsetを指定する必要があります。 のような
data:image/jpeg;charset=utf-8;base64,
data URI scheme]1の構文に従って、{{116798}}のように正しいContent-type、Content-encoding、charsetを指定する必要があります。
data:[<media type>][;charset=<character set>][;base64],<data>