I’m having trouble displaying a Base64 image inline.
How can I do it?
<!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>
My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>You can try this Base64 decoder to see if your Base64 data is correct or not.