CODEWITHSUNDEEP
javascriptreactjsimagereact-hooks
zahra zamani
zahra zamani

Reputation: 1375

How to show a base64 image in html

I get some information from the API that has a property called pic (image) which is base64 like this:

{description: "description"
id: 1
isActive: false
max: 10
min: 1 
pic: "W29iamVjdCBGaWxlXQ=="   //-->is base64
rewardCategoryEnTitle: "test"
rewardCategoryId: 2
rewardCategoryTitle: "test"
scoreValue: 200
title: "test"}

How can I show it in tag <img/>?

Upvotes: 0

Views: 3400

Answers (2)

Prabhath Withanage
Prabhath Withanage

Reputation: 242

If it is valid base64 you can show it like this

<img class="itemImage" src="{{ 'data:image/png;base64,' + photo }}"/>

Validate your base64 string here.

Upvotes: 3

Richard Hpa
Richard Hpa

Reputation: 2887

all you have to do is include data:image/jpg;base64, infront of the base64 string. You can change jpg to whatever file type you want it to be

<img src="data:image/jpg;base64,....."/>

so if you are using react it would probably be like this

<img src={`data:image/jpg;base64,${objectName.pic}`}/>

Upvotes: 3

Related Questions