如何在 ReactJs 中显示存在于 src 文件夹之外的卡片组件的图像？

Question

我有一个与 FastAPI 和 MongoDB 集成的 React 应用程序。 在我的项目中，有一个页面将一些信息显示为卡片。 这些卡片包含图像，但这些图像是在后端文件夹中自动生成的。 每张卡片都包含自己图片的路径，但是当我在组件中调用此路径时，它不会显示如图1所示的图片。 注意：我使用 React 组件类格式来构建我的项目！

以下是每张卡片的生成方式：

    renderCard(card, index) {
    return (
      <Card key={index} className="box">
        <Card.Img className="bodyImg" variant="top" src={card.coverPic} />
        <Card.Body className="bodytext">
          <Card.Title>{card.name}</Card.Title>
          <Card.Text>{card.Placename}</Card.Text>
          <Card.Text>{card.setting}</Card.Text>
          <Link
            to={{
              pathname: "/CardInfo",
              state: card,
            }}
            style={{ textDecoration: "none" }}
            className="buttonStyle"
          >
            Show
          </Link>
        </Card.Body>
      </Card>
    );
  }

以下是两张卡的信息：

第一张牌：

{
  "_id": {
    "$oid": "60fd0c3b3d4412b25bea49e7"
  },
  "name": "Test the coverPic",
  "path": [
    "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4"
  ],
  "Placename": "Makkahh",
  "setting": "Public Place",
  "country": "Saudi Arabia",
  "duration": "1",
  "date": "2021-06-29",
  "sendEmail": true,
  "publish": true,
  "outputVideoPath": "output/Test the coverPic.avi",
  "contactRate": 1,
  "userId": "60fbffa2e7db6bc44a842ea6",
  "framesPath": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/",
  "coverPic": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/Test the coverPic-30.png"
}

第二张牌：

{
  "_id": {
    "$oid": "60fc79bbac4f82a891c01ef2"
  },
  "name": "testing",
  "path": [
    "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4"
  ],
  "Placename": "Haram",
  "setting": "Mass Gathering",
  "country": "Åland Islands",
  "duration": "1",
  "date": "2021-07-02",
  "sendEmail": false,
  "publish": false,
  "outputVideoPath": "output/testing.avi",
  "contactRate": 1,
  "userId": "60fc79a0ac4f82a891c01ef1",
  "framesPath": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/",
  "coverPic": "output/testing-30.png"
}

Answer 1

AFAIK 您不能使用src文件夹之外的文件。 我想这有一些安全原因。 您可以尝试创建符号链接或硬链接。 它是指向可以在src文件夹中创建的另一个文件或目录的链接。

打开一个cmd窗口并导航到src文件夹中您选择的文件夹，例如images 。

执行mklink /h HaramCovid2.mp4 "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4"以创建硬链接。

JSON：

  "path": ["./images/picture1"],

编辑：更改了mklink命令。 请试试这个。