在 React 中将 blob 字符串转换为图像答案

【问题标题】：Convert blob string to image in React在 React 中将 blob 字符串转换为图像
【发布时间】：2020-09-22 16:19:53
【问题描述】：

有一个对象包含一个保存为字符串的图像作为字段。

看起来像这样

myObj = {
  ...
  image: blob:http://localhost:3000/304dbb9b-6465-4dc8-8b2c-5a25fae7e452
};

如何转换并显示为图像？

我需要以这种形式保存它：

const row = [
      { label: 'NAME', value: `${myObj.name}` },
      { label: 'IMAGE', value: `${myObj.image}` },
    ];

这是被映射的并且一些单元格被填充了数据：

<table>  
  <tbody>
    <tr>
      {row.map(item => (
        <Cell
          key={row.indexOf(item)}
          label={item.label}
          value={item.value}
        />
      ))}
    </tr>    
</table>

我是如何尝试的：上线

{ label: 'IMAGE', value: `${myObj.image}` },

如果是这样，它将在屏幕上打印字符串值。

我也尝试用value: <img alt="" src={myObj.image} /> 代替value: ``${myObj.image}，但在这种情况下没有显示任何内容

【问题讨论】：

标签： javascript reactjs image blob

【解决方案1】：

你应该使用 URL.createObjectURL

<img src={URL.createObjectURL(myObj.image)} alt=""/>

【讨论】：