CODEWITHSUNDEEP
reactjs
Teja Sree
Teja Sree

Reputation: 69

how to convert a base64 string in to normal image and show it in a web page in react js

I'm using fetch to retrieve data from an API, it returns an image in base 64 string format. How can i convert it in to a normal image and show it in a web page using react?

Upvotes: 3

Views: 12815

Answers (4)

Muhammad Usman Ali Baloch
Muhammad Usman Ali Baloch

Reputation: 64

use this below, make sure there is no comma in between them

<img src={"data:image/png;base64" + base64encodedimg } />

Upvotes: 0

Bruno Souza
Bruno Souza

Reputation: 29

Try to use:

<img src={"data:image/png;base64," +  Data.Photo} />

this was the solution that worked for me...

Upvotes: 2

H S
H S

Reputation: 735

I think following information might help you.

So, base64 encoding has encoded binary information into textual data and to decode it back you can use - atob

To show it in a web-page using react - you may consider to use "img" tag itself, as suggested by @tico in comment using data-uri.

In general data uri, let you put your image( and other data) in the form of url.

So, simple steps would be - 1. Fetch the base64 encoded image. 2. Make a data-uri. 3. Load the source into the image tag, using state preferably. 4. And you are done!

Hope this helps.

Upvotes: 0

Mohit Mutha
Mohit Mutha

Reputation: 3001

Try to use <img src="data:image/jpeg;base64,{base64imagestring}" />

Upvotes: 2

Related Questions