0

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

zahra zamani
  • 1,323
  • 10
  • 27
  • Your `W29iamVjdCBGaWxlXQ==` doesn't look like a valid base64 img. – Ryan Le Sep 04 '21 at 07:15
  • 2
    Does this answer your question? [How to show base64 image in react?](https://stackoverflow.com/questions/56769076/how-to-show-base64-image-in-react) – Lakshaya U. Sep 04 '21 at 07:16
  • Possible duplicate of https://stackoverflow.com/questions/56769076/how-to-show-base64-image-in-react – Lakshaya U. Sep 04 '21 at 07:20
  • Does this answer your question? [How to display Base64 images in HTML](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) – Ryan Le Sep 04 '21 at 07:22

2 Answers2

2

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}`}/>
Richard Hpa
  • 2,353
  • 14
  • 23
2

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.

Prabhath Withanage
  • 202
  • 2
  • 10