javascript - 如何在 ReactJs 中显示存在于 src 文件夹之外的卡片组件的图像?
问题描述
我有一个与 FastAPI 和 MongoDB 集成的反应应用程序。在我的项目中,有一个页面将一些信息显示为卡片。这些卡片包含图像,但这些图像是在后端文件夹中自动生成的。每张卡片都包含自己图片的路径,但是当我在组件中调用这个路径时,它并没有显示如图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"
}
解决方案
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
命令。请试试这个。
推荐阅读
- java - 如何解析地图对象
从 Google Cloud Firestore 的 documentSnapshot.getData() 返回到 POJO? - html - 如何将此表格准确对齐在持有表格的分区的中心?
- java - 如何为未知数量的线程设置倒计时
- javascript - Onclick 在第三方表单 iframe 中填写表单字段
- networking - Netplan 错误:无法绑定到端口 2893,地址已在使用中
- html - 由于未知原因,圆锥梯度 css 在 React 中不起作用
- mysql - MySQL 左/右/外连接
- python - 使用 Django 的 ORM 聚合 OneToMany 关系中不同日期的数量
- javascript - mongodb函数currentOp()的返回记录在哪里?
- sql - 如何将选择查询的结果放入 postgresql 中的函数