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

问题描述

我有一个与 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","Placename": "Haram","setting": "Mass Gathering","country": "Åland Islands","date": "2021-07-02","sendEmail": false,"publish": false,"outputVideoPath": "output/testing.avi","userId": "60fc79a0ac4f82a891c01ef1","coverPic": "output/testing-30.png"
}

解决方法

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

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

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

JSON：

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

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