如何在 html 中显示 base64 图像答案

【问题标题】：How to show a base64 image in html如何在 html 中显示 base64 图像
【发布时间】：2021-11-02 06:45:24
【问题描述】：

我从 API 获得一些信息，该 API 有一个名为 pic (image) 的属性，它是 base64 像这样：

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

如何在标签<img/>中显示？

【问题讨论】：

您的 W29iamVjdCBGaWxlXQ== 看起来不像是有效的 base64 img。
这能回答你的问题吗？ How to show base64 image in react?
stackoverflow.com/questions/56769076/…的可能重复
这能回答你的问题吗？ How to display Base64 images in HTML

标签： javascript reactjs image react-hooks

【解决方案1】：

您所要做的就是在 base64 字符串的前面包含data:image/jpg;base64,。您可以将 jpg 更改为您想要的任何文件类型

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

所以如果你使用 react 可能是这样的

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

【讨论】：

【解决方案2】：

如果是有效的base64，你可以这样显示

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

验证您的 base64 字符串 here。

【讨论】：