Javascript 将Blob转换为React中单元格内的图像

该值的访问方式如下：

myObj.value

，它是

blob:http://localhost:3000/304dbb9b-6465-4dc8-8b2c-5a25fae7e452

单元组件：

export default class Cell extends React.PureComponent {
  render() {
    const { label, value } = this.props;
    return (
      <td>
        {label && (
          <div>
            <span className="cell-label">{label}</span>
            <br />
          </div>
        )}<span>{value}</span>                              
        )}
      </td>
    );
  }
}

导出默认类单元格扩展React.PureComponent{
render（）{
const{label，value}=this.props；
返回(
{标签&&(
{label}


)}{value}
)}
);
}
}

如果我像下面的例子那样做，它会显示字符串值，我想显示实际的图像。这可能吗

<tr>
    {myObj.map(item => (
                <Cell
                  key={myObj.indexOf(item)}
                  label={item.label}
                  value={item.value} //I guess something here must be changed
                />
              ))}
</tr>

{myObj.map（项=>(
))}

尝试将blob转换为dataUrl：

URL.createObjectURL(blob)

资料来源：

然后可以将其作为图像加载：

<img src={URL.createObjectURL(dataUrl)} />

{myObj.map（项=>(
))}

因此，在渲染之前，我在Cell组件中编写了

blobToDataUrl

方法，它说：

预期类方法“blobToDataUrl”将使用“this”

我不知道将其放置在何处，因此它位于无状态的功能组件中。我会修改我的答案。我觉得这不是什么太难的事情，但由于我的限制，我无法解决它。你能参加一个会议，这样我就可以分享我的屏幕了吗？这对我很有帮助，我会使用ObjectURL而不是fileReaderyea，因为您不必将其编码为b64，然后将其解码回二进制。objecturl只是指向磁盘文件的指针，可以节省更多内存

<tr>
    {myObj.map(item => (
        <Cell
            key={myObj.indexOf(item)}
            label={item.label}
            value={URL.createObjectURL(item.value)}
        />
    ))}
</tr>

// URL.createObjectURL(this.props.blob)


export default class ImageCell extends React.PureComponent {
  render() {
    const { label, blob } = this.props;
    return (
      <td>
        {label && (
          <div>
            <span className="cell-label">{label}</span>
            <br />
          </div>
        )}
          <span>
            <img src={URL.createObjectURL(blob)}>
          </span>
        )}
      </td>
    );
  }
}

<tr>
    {myObj.map(item => (
        <ImageCell
            key={myObj.indexOf(item)}
            label={item.label}
            blob={item.value}
        />
    ))}
</tr>