在 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 内部转换blob。将它放在 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>