如何在 React.js 上以二进制数据呈现来自 MongoDB 的图像？

Question

我构建了一个 API，用于接收发布请求并保存一张资产卡片以供出租（例如 Airbnb），并带有图片。

在前端我正在使用 react

保存在 MongoDB 上的数据如下所示：

_id:objectId:("611f654ed352485804d72e23")
资产名称：“房子”
资产描述：“漂亮的房子”
资产地址：“某处”
资产电话：“052978888”
资产图像：对象
数据：二进制（'QzpcZmFrZXBhdGhcbWFpbF9CRy5wbmc=',0）
contentType:"C:\fakepath\mail_BG.png"
资产编号：“430076806”
user_id:objectId("6117a28808fca726801468b3")
__v:0

我想呈现用户保存在页面中的多张卡片调用我的资产..
我正在获取除图像之外的所有数据.. 我几乎尝试了我在网上能找到的所有东西.. 我要先谢谢大家。。

添加代码：

card.jsx

import React from 'react';


const Card = ({ card }) => {
  console.log(card.assetImage);
  return (
    <div className="col-md-6 col-lg-4 mt-3">
      <div className="card">

        <img src={card.assetImage} className="p-2" width="100" alt={card.assetName} />
        <div className="card-body">
          <h5 className="card-title">{card.assetName}</h5>
          <p className="card-text">{card.assetDescription}</p>
          <p className="card-text border-top pt-2">
            <b>Tel: </b>
            {card.assetPhone}
            <br />
            {card.assetAddress}
          </p>
        </div>
      </div>
    </div>
  );
}

export default Card;

我的资产.jsx

class MyAssets extends Component {

  state = {
    cards: []
  }

  async componentDidMount() {

     // sending a GET request via axios to get all the cards

    const { data } = await cardService.getMyAssets();
    if (data.length > 0) this.setState({ cards: data });

  }

  render() {

    const { cards } = this.state;

    return (
      <div className="container">
        <PageHeader>My Assets</PageHeader>
        <div className="row">
          <div className="col-12 mt-4">
            <p>your assets for rent</p>
          </div>
        </div>
        <div className="row">
          {cards.length > 0 &&
            cards.map(card => <Card card={card} key={card._id} />)}
        </div>
      </div>
    );

  }
}

export default MyAssets;

我添加了一张图片来向你展示我的 react 应用在浏览器上的样子：
my react app on chrome

Answer 1

将数组转换为 Uint8Array

let data = [67, 58, 93, .......]
let uint8 = new Uint8Array(data)

从 Uint8Array 创建一个文件。

let file = new File([uint8], { type: "image/png" })

为图像文件创建一个Object-URL 并显示它。

const url = URL.createObjectURL(file)

return <img src={url}/>