如何在React中显示保存为blob的图片？

Question

我写了一个函数，将图像保存为blob。

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

这就是在onChange中调用的函数。

  handleUploadImage(event) {
    const that = this;
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      that.setState({
        image: URL.createObjectURL(file),
        userImage: reader.result,
      });
    };
  }

我认为这很好，因为它保存在DB中 因为文档中有一个叫做image的字段，它看起来像这样。blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94

这个对象可以像这样被访问 this.props.product，访问图像是 this.props.product.image

问题是当我想显示图像时，我不知道如何做到这一点。

我试着把它放在render like中。

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

但却出现了这样的错误:

和头。

有什么建议吗？

Answer 1

你应该尝试URL.createObjectURL(blob)

https:/developer.mozilla.orgen-USdocsWebAPIURLcreateObjectURL。

myImage.src = URL.createObjectURL(blob);