How to display Base64 images in HTML?

745

I'm having trouble displaying a Base64 image inline.

Can someone point me in the right direction?

<!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>

This question is tagged with html image base64 inline

~ Asked on 2011-12-14 04:53:21

The Best Answer is


1126

My suspect is of course actual base64 data, otherwise it looks good to me. See this fiddle where similar scheme is working. You may try specifying char set.

_x000D_
_x000D_
<div>_x000D_
  <p>Taken from wikpedia</p>_x000D_
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA_x000D_
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO_x000D_
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />_x000D_
</div>
_x000D_
_x000D_
_x000D_

You can try this base64 decoder to see if your base64 data is correct or not.

~ Answered on 2011-12-14 05:06:26


96

You need to specify correct Content-type, Content-encoding and charset like

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

according to the syntax of the data URI scheme:

 data:[<media type>][;charset=<character set>][;base64],<data>

~ Answered on 2011-12-14 05:00:27


Most Viewed Questions: