从 base64 字符串设置 <img> src 时的 net::ERR_INVALID_URL答案

【问题标题】：net::ERR_INVALID_URL when setting <img> src from base64 string从 base64 字符串设置 <img> src 时的 net::ERR_INVALID_URL
【发布时间】：2019-07-22 05:51:23
【问题描述】：

我有一个带有 img 标签的 react 组件，并将图像加载为 base64 字符串。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEX___8AAABVwtN-AAAAy0lEQVR42uyY3Q0DIQyD2cD7b-kNrioh_PQ49bXFdqWeIr6nCGJDsSzLsv5EuKpYQHBUegDjv64yK0UA13shVrMSBlqj5IF6XJSBxDhVgkAbnYjf86Q9HFhQfrPYk4Hup3WYbvokAYDNV9FtBZoARofiw6IIXFO-KLifHRVgDRZ3QgRYxmicoj1zODCMNfZOzxpqwBS00HoFSaBH7aQ-L-ZiQNxHiY3jCAFtsyDyliIwhc4MG4pAf7jLnPX4snc0YFmWZf2yXgEAAP__jsd46gGd3UIAAAAASUVORK5CYII=" alt="base64 image" style='width: 200px; height: 200px' />

但它只适用于野生动物园。无法在谷歌浏览器上运行。

我错过了什么吗？

谢谢

【问题讨论】：

标签： html reactjs google-chrome safari base64

【解决方案1】：

您可以使用它在组件中添加图像：

<img src={required("./imagefolder/image.jpg")} alt="my image" />

或者你必须先导入你的图片然后使用它：

import myimage from "./imagefolder/image.jpg"

然后像这样使用它：

<img src={myimage} alt="my image" />

【讨论】：

感谢您的回答。但是图像作为base64字符串动态地来自api。我无法像静态图像一样导入它