How to display base64 image in React Js?

Question

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} />

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
– ControlAltDel, Commented Dec 22, 2021 at 17:03
Does this answer your question? convert base64 to image in javascript/jquery — Ankit Katheriya
– 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
– deepesh mhatre, Commented Dec 23, 2021 at 5:23

Jared Dickson · Accepted Answer · 2021-12-22 17:01:33Z

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" />

answered Dec 22, 2021 at 17:01

Jared Dickson

5583 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deepesh mhatre Over a year ago

As stated above,I dont want to paste the base64 string into src directly,for some reason Its very slow to display the image & its not supported by some browsers.

Collectives™ on Stack Overflow

How to display base64 image in React Js?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related