Display an image from base64 code in HTML

Base64 represents binary data for any file or attachment in an ASCII string format. This is a method where binary information encoded so that it can be sent easily where text-only communication is possible. With this process, the attachments like images and any other media file can be converted into text and then the text sent to the destination.

With this process, the attachments like images and any other media file can be converted into text and then the text sent to the destination. The encoded text then decoded again and it represents the original media file.

Live word counter from HTML textarea in JavaScript

Here, in this post, I am going to tell you how to display an image from encoded base64 code in HTML.

Display image on web page from base64 in HTML

To retrieve an image from a base64 text, you need to follow rules of HTML. It is very easy to show the image from base64 encoded text in HTML.

Suppose, the base64 code for your image is iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAIAAACExCpEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASSURBVChTY5DutMGDRqZ0pw0A4ZNOwQNf and you want to display the image in your HTML page using HTML code.

The HTML code syntax to show an image from base64 binary code will be like below:

<img src="data:image/<IMAGE_TYPE>;base64,<BASE64_ENCODED_IMAGE>">

In the above code, the type of the image can be PNG, JPG, JPEG or GIF.



Below is the HTML code that will show the image for the base64 code on the web page:

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

If you run the above HTML code on your browser, then you will see a small green rectangle. Yes, the base64 encoded code is the encoded code for that green rectangle and for this reason you will see that image on the web page.

Youtube Video Downloader Android Source Code

YouTube Video Downloader PHP Script – Download Source Code

The image type here is PNG. If you want to test it with any other image then you need to get the base64 encoded code of your image which you can get from any online image to base64 converter.

Well, you can notice it clearly that the process of showing normal images from a directory on the web page is same as here we show the image from base64 binary coded text. Here you just have to put “data:image/png;base64, BASE64_CODE_FOR_THE_IMAGE” inside for the src.

So you have seen how easy it is to use the base64 encoded data of an image to display image on a web page.

Leave a Reply

Your email address will not be published. Required fields are marked *