Intellipaat Back

Explore Courses Blog Tutorials Interview Questions

How to display Base64 images in HTML?

0 votes
2 views
in Web Technology by (20.3k points)

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>

1 Answer

0 votes
by (40.7k points)

You can try specifying charset like this:

<div>

  <p>Taken from wikpedia</p>

  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA

    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO

        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

</div>

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

Related questions

0 votes
1 answer
CSS Display an Image Resized and Cropped
asked Sep 4, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Base64 encoding and decoding in client-side Javascript
asked Mar 25, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
Decode Base64 data in Java
asked Jul 16, 2019 in Java by Suresh (3.4k points)
0 votes
1 answer
How do I auto-resize an image to fit a 'div' container?
asked Aug 14, 2019 in Web Technology by Sammy (47.6k points)

31k questions

32.8k answers

501 comments

693 users

Browse Categories

© COPYRIGHT 2011-2024 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

...