如何在Reaction中显示另存为BLOB的图像-前端问题

How to display an image saved as blob in React(如何在Reaction中显示另存为BLOB的图像)

本文介绍了如何在Reaction中显示另存为BLOB的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我编写了一个将图像保存为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,
      });
    };
  }

我认为这很好用，因为它保存在数据库中，因为文档有一个名为image的字段，如下所示：blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94

该对象可以像this.props.product那样访问，要访问它所在的镜像this.props.product.image

问题是当我想要显示图像时，我不知道如何操作。

我尝试将其放入Render中，如下所示：

  {
    this.props.product.image ? (
      <img alt="IiBzcmM9e3RoaXMucHJvcHMucHJvZHVjdC5pbWFnZX0gLyZndDsKICAgICkgOiAoCiAgICAgIG51bGwKICAgICk7CiAgfQo8L2NvZGU+PC9wcmU+Cgo8cD7lroPlvJXlj5HmraTplJnor6/vvJo8L3A+Cgo8cD48L3A+Cgo8cD7lkozmoIfpopjvvJoKPC9wPgoKPHA+5pyJ5LuA5LmI5bu66K6u5ZCX77yfPC9wPgo8aDMgY2xhc3M9"h-catalog' rel='catalog'>推荐答案您应该尝试URL.createObjectURL(Blob)

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

myImage.src = URL.createObjectURL(blob);


                        这篇关于如何在Reaction中显示另存为BLOB的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！