javascript - 在 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 /> 的组件内转换 blob。或里面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>