I am receiving the Image as Base64 from the server. I want to decode and display the image. How do I decode base64 to Image ? I dont want to directly paste the base64 string into the image source as its taking alot of time to load the image and also not supported by few browsers.

Below is the code :

// Takes base64 string & returns Image
function decodeBase64Image(base64_string) { };

var Image = decodeBase64Image(base64_string);

<img src={Image} />

I am receiving the Image as Base64 from the server. I want to decode and display the image. How do I decode base64 to Image ? I dont want to directly paste the base64 string into the image source as its taking alot of time to load the image and also not supported by few browsers.

Below is the code :

// Takes base64 string & returns Image
function decodeBase64Image(base64_string) { };

var Image = decodeBase64Image(base64_string);

<img src={Image} />

• javascript
• reactjs

Share Improve this question Follow asked Dec 22, 2021 at 16:58 deepesh mhatredeepesh mhatre 9711 gold badge44 silver badges1212 bronze badges 4

• Is your plan to decode the image and store it somewhere on your website, so it can be accessed that way by the page? – ControlAltDel Commented Dec 22, 2021 at 17:03
• No,I may plan to download the Image latter. – deepesh mhatre Commented Dec 22, 2021 at 17:19
• Does this answer your question? convert base64 to image in javascript/jquery – Ankit Katheriya Commented Dec 22, 2021 at 17:35
• No,most of the solutions given follow a similar approach of giving base64 string sirectly to src. What if I want to download the image ? also it is slow. I want to convert base64 to Image object and then do some processing over it – deepesh mhatre Commented Dec 23, 2021 at 5:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You might need to make sure the prefix is provided, but decoding shouldn't be necessary.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
        //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />