在 React 中將 blob 字符串轉換為圖像

Question

有一個 object 包含作為字段保存為字符串的圖像。

看起來像這樣

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=""/>