How to display Base64 images in HTML?

html image base64 inline

Christopher · Dec 14, 2011 · Viewed 1.3M times · Source

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>

Answer

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.

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

How to display Base64 images in HTML?

Answer

Related questions