Question

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

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

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

但不幸的是我受到了欢迎：

获取数据：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转换为画布，但它比我希望的更多的工作现在处理）

编辑：我应该更仔细地看一下这个字符串。我的服务器响应是ajax请求，在Python3中（可能是2？），字节串不是json可序列化的。我将它转换为str为str（plots [0]）。这意外地在我的base64对象周围添加了一个b'{string}'包装器，如控制台响应中所示。我想这种语法足以让Chrome掉线。那个，带有角度和反应本机解决方案的红色鲱鱼让我相信这是一个反应问题，因为它确实是一个python字符串问题。它现在正在工作，我很感激输入。

Answer 1

如果没有完整的字符串，很难确定可能出现的问题。

但是，我想我可能已经找到了问题：

获取数据：image / png; base64，b'iV ...... CYII ='net :: ERR_INVALID_URL

根据您收到的上述错误，看起来您可能在URI的末尾错过了额外的=，具体取决于长度。

尝试更改它，使其以CYII==而不是CYII=结束，因为它似乎是当前的。

或者，变量matchPlot1可能在某种程度上是不正确的。如果它有//，请务必撤消评论。

ReactJS，在<img/>标记中呈现base64字符串会出现错误ERR_INVALID_URL

1 个答案: