javascript - ReactJS，在 标签中呈现 base64 字符串给出错误 ERR_INVALID_URL

Question

我正在尝试将一些服务器生成的图像(具体来说是 matplotlib 图)渲染到 ReactJS 模块，而不在服务器上保存文件。我采用的方法是使用 base64 生成图像字符串。

当需要在 React 组件中渲染我的图像时，我使用:

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

但不幸的是，我遇到了:

GET data:image/png;base64,b'iV... ...CYII=' net::ERR_INVALID_URL

在 javascript 控制台中。据我了解，结果 HTML 的某处认为我指定了一个外部超链接，而实际上我只想使用实际解码的 base64 字符串作为图像。我已经看到 Angular (img ng-src="") 和 React-Native (Image/) 的解决方案，但还没有找到 ReactJS 的解决方案。

我正在使用 ReactJS 15.1.0 和 JSXTransformer v0.13.3 客户端渲染。至于我的网络服务器，如果相关的话，是带有 Python3 的 Flask。

在服务器上保存副本的情况下生成图像的任何帮助或替代策略都将受到赞赏! (PS。我已经使用 D3 绘制了数据客户端的图表，但是对于 SVG 来说，点太多而且性能很糟糕。我已经研究过将 SVGS 转换为 Canvas ，但它比我希望的要多立即处理)

编辑:我应该更仔细地查看字符串。我的服务器响应是一个 ajax 请求，在 Python3(也许是 2？)中，字节串不是 json 可序列化的。我将它转换为 str 为 str(plots[0])。这不小心在我的 base64 对象周围添加了一个 b'{string}' 包装器，如控制台响应所示。我想这种语法足以让 chrome 掉线。那，以及带有 Angular 和 native react 解决方案的红鲱鱼让我相信这是一个 react 问题，而事实上它是一个 python 字符串问题。它现在正在运行，感谢您的投入。

Answer 1

没有完整的字符串，很难确定哪里出了问题。

但是，我想我可能已经发现了问题:

GET data:image/png;base64,b'iV... ...CYII=' net::ERR_INVALID_URL

根据您遇到的上述错误，看起来您可能在您的 URI 末尾缺少一个额外的 =，具体取决于长度。

尝试更改它，使其以 CYII== 结尾，而不是像当前那样以 CYII= 结尾。

或者，变量 matchPlot1 可能不正确。如果它有 //，请确保对注释进行转义。