Javascript 如何在React中显示另存为blob的图像

我编写了一个将图像保存为blob的函数：

render() {
  ...
  return (
    ...
      <input
        accept="image/*"
        onChange={this.handleUploadImage.bind(this)}
        id="contained-button-file"
        multiple
        type="file"
      />
)}

我认为这很好，因为它保存在DB中，因为文档中有一个名为image的字段，看起来像这样：

blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94

可以像

this.props.product

那样访问此对象，以访问其所在的图像

this.props.product.image

问题是，当我想显示图像时，我不知道该怎么做

我试着把它放在渲染中，就像：

  {
    this.props.product.image ? (
      <img alt="" src={this.props.product.image} />
    ) : (
      null
    );
  }

{
这个.道具.产品.形象(
) : (
无效的
);
}

它抛出以下错误：

和标题：

---

有什么建议吗？

您应该试试URL.createObjectURL（blob）

---

您是否尝试在中渲染图像源？另一方面，注意：

onChange={this.handleUploadImage.bind（this）}

将在每次渲染时创建一个新函数。您可以通过在组件的构造函数中只绑定一次来优化它。@haensl我只尝试了我在问题中提出的方法。它应该如何呈现成那样？使用

btoa

？

如果我没记错的话，出于安全考虑，您不能使用本地文件。但如果这是原因，这将被记录在控制台中。成功了，另一件重要的事情是，如果使用axios，则在请求中添加

响应类型：“blob”

  {
    this.props.product.image ? (
      <img alt="" src={this.props.product.image} />
    ) : (
      null
    );
  }

myImage.src = URL.createObjectURL(blob);