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

Question

有一个对象，其中包含一个以字符串形式保存的图像作为字段。

它看起来像这样

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: ``${myObj.image} 放 value: <img alt="" src={myObj.image} /> 但在这种情况下，什么都不显示

Answer 1

你应该使用URL.createObjectURL

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