如何在React.js中将base64字符串转换为普通图像并在网页上显示？

Question

我正在使用fetch从API检索数据，它返回一个base64字符串格式的图像。如何将它转换为常规图像并在使用react的网页中显示？

- Teja Sree

---

你会使用简单的HTML5 <img> 标签吗？如果是这样，请使用标准的 <img src="data:image/png[jpg];base64, [yourString]">。 - undefined

@Tico，感谢你的帮助。 - undefined

Answer 1

尝试使用 <img src="data:image/jpeg;base64,{base64imagestring}" />。

- Mohit Mutha

---

我可以发送一个包含Base64字符串的变量，而不是直接发送Base64字符串吗？ - undefined

是的，base64imagestring 是我回答中表示一个变量名的。 - undefined

Answer 2

尝试使用：

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

这是对我有效的解决方案...

- Bruno Souza

Answer 3

我觉得以下信息可能对你有帮助。

所以，base64编码已经将二进制信息编码为文本数据，要解码回来，你可以使用atob。

要在网页上使用React来显示它，你可以考虑直接使用"img"标签，正如评论中的@tico建议的那样，使用data-uri。

一般情况下，data uri允许你以url形式放置图片（和其他数据）。

所以，简单的步骤是： 1. 获取base64编码的图像。 2. 创建一个data-uri。 3. 使用状态将源加载到图像标签中。 4. 完成！

希望这能帮到你。

- H S

Answer 4

使用以下代码，确保它们之间没有逗号：

```html ```

- Muhammad Usman Ali Baloch