在 React 中将 Blob 转换为 Cell 内的图像

Question

该值可以像这样访问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>
    );
  }
}

如果我像下面的示例那样执行操作，它会显示字符串值，并且我想显示实际图像。这可能吗？

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

Answer 1

尝试将 blob 转换为 dataUrl：

URL.createObjectURL(blob)

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

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

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

或者在你的代码中类似：

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

我希望你能将其转化为你所需要的。您可以在渲染的组件内部<Cell />或在Cell. 将其放在 Cell 中听起来很合适，因此其他组件不必关心 blob 到 dataUrl 逻辑的实现细节。

如果你把它放在里面Cell，那么你需要像这样调用它：

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