CODEWITHSUNDEEP
javascriptreactjs
deepesh mhatre
deepesh mhatre

Reputation: 97

How to display base64 image in React Js?

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

Upvotes: 0

Views: 8826

Answers (1)

Jared Dickson
Jared Dickson

Reputation: 548

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

Upvotes: 3

Related Questions