如何在 React Js 中显示 base64 图像？

Posted 2023-02-21

【中文标题】如何在 React Js 中显示 base64 图像？

【英文标题】：How to display base64 image in React Js?

【发布时间】：2022-01-23 21:13:53

【问题描述】：

我正在从服务器接收 Base64 格式的图像。我想解码并显示图像。如何将 base64 解码为 Image ？我不想直接将 base64 字符串粘贴到图像源中，因为它需要大量时间来加载图像，而且少数浏览器也不支持。

下面是代码：

// Takes base64 string & returns Image
function decodeBase64Image(base64_string)  ;

var Image = decodeBase64Image(base64_string);

<img src=Image />

【问题讨论】：

您是否计划解码图像并将其存储在您网站的某个位置，以便页面可以通过这种方式访问​​它？

不，我可能打算稍后下载图像。

这能回答你的问题吗？ convert base64 to image in javascript/jquery

不，大多数给出的解决方案都遵循将base64字符串直接提供给src的类似方法。如果我想下载图像怎么办？它也很慢。我想将 base64 转换为 Image 对象，然后对其进行一些处理

【参考方案1】：

您可能需要确保提供了前缀，但不需要解码。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
        //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="  />

【讨论】：

如上所述，我不想将base64字符串直接粘贴到src中，由于某种原因显示图像非常慢并且某些浏览器不支持。