Javascript ReactJS，在<；中呈现base64字符串；img>；标记给出错误ERR\u无效\u URL

我试图在不保存服务器上的文件的情况下，将一些服务器生成的图像（特定于matplotlib图）渲染到ReactJS模块。我采用的方法是使用base64生成一个图像字符串

在React组件中渲染图像时，我使用：

render(){
  const chart1 ="data:image/png;base64," + this.props.matchPlot1
  return <div>
      <img src={chart1} />
  </div>
}

render（）{
const chart1=“data:image/png；base64”+this.props.matchPlot1
返回
}

但不幸的是，我遇到了：

获取数据：图像/png；base64，b'iV。。。CYII='net:：ERR\u无效\u URL

在javascript控制台中。据我所知，生成的HTML认为我在指定一个外部超链接，而实际上我只想使用实际解码的base64字符串作为图像。我已经看到Angular（img ng src=“”）和React Native（Image/）的解决方案，但还没有找到ReactJS的解决方案

我正在使用ReactJS15.1.0和JSXTransformerV0.13.3客户端渲染。至于我的Web服务器，如果相关的话，是带有Python3的烧瓶

感谢您提供的任何帮助或替代策略，以便在不将副本保存到服务器上的情况下生成图像！（注：我曾使用D3绘制数据客户端的图形，但SVG有太多的点，性能很差。我曾考虑将SVG转换为画布，但这比我现在希望处理的工作要多）

编辑：

---

我应该更仔细地看这根绳子。我的服务器响应是一个ajax请求，在Python3（可能是2？）中，bytestring是不可json序列化的。我将其转换为str作为str（plots[0]）。这不小心在我的base64对象周围添加了一个b{string}包装器，控制台响应中就证明了这一点。我想这种语法足以让chrome一扫而光。还有angular和react本机解决方案的“红鲱鱼”让我相信这是一个react问题，而事实上这是一个python字符串问题。它现在正在工作，我非常感谢您的输入。

如果没有完整的字符串，很难确定会出现什么问题

然而，我想我可能已经发现了问题：

获取数据：图像/png；base64，b'iV。。。CYII='net:：ERR\u无效\u URL

根据您得到的上述错误，您可能会在URI末尾缺少一个额外的

=

，具体取决于长度

尝试更改它，使其以

CYII=

结尾，而不是像当前那样以

CYII=

结尾

---

或者，变量

matchPlot1

可能不正确。如果它有

/

，请确保避开注释。

你能为

匹配绘图1

添加字符串吗？克里斯，我想你可能只是强迫我回答我自己的问题。我不小心在python3中将字节字符串转换为str（），以便将其添加到json字符串中。当我试图在线转换时，结果字符串没有显示。然后我粘贴了原始的字节字符串，它成功了。我将我的初始反应状态设置为字符串，现在它可以工作了。至于添加字符串，最简单的方法是什么？这是15页的文字哦，哇。您可以将其添加到

代码包装中

。