所以我試圖用 json 資料讓我更容易地添加專案。
基本上我正在創建專案塊，每個專案都帶有一個影像，但是即使 id == 到我給影像的名稱，影像也不會呈現。是否有任何選擇，或者我應該放棄 json 檔案？
- 我正在嘗試重新做的事情
- 我實際得到的
reactjs 代碼
import Pdata from "../../api/projects.json";
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
import { Component } from "react";
class Plist extends Component {
render() {
return (
<div
className="project-list"
data-aos="fade-right"
data-aos-duration="1200"
>
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={projectDetail.id} alt="" />
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
</div>
);
}
}
export default Plist;
json資料
[
{
"id": "p1",
"title": "Pole Anglais",
"date": "16/10/2019",
"desc": "This project was in association with Filip Zafirovski, my English teacher by the time who wanted students to get a source of inspiration by publishing articles and/or their work. It was my very first web project, and was kind of hard to pull off but I still enjoyed it.Since for the very first time i coded for a project and not myself.",
"tags": "Loads of crap"
},
{
"id": "p2",
"title": "Project I.Art",
"date": "3/07/2021",
"desc": "In France to go to college you have to get a diploma, which requires multiple exams to be validated. One of the subjects I had to do a presentation on was Art. I decided to create an idea around an Artificial Intelligence who would create art based on the likes and dislikes of the spectator. This panel is a website made for the occasion.",
"tags": "Html,Scss, & AOS librairie"
},
{
"id": "p3",
"title": "Hestia Real Estate",
"date": "18-26/10/2021",
"desc": "At the very start of my student life @hetic, They grouped student randomly to make a project. The subject of the project was to create an agency, a fake web-app and website that sells premium submarines to plus ultra rich people. For that project I designed the website of the agency, and the app for the complex.",
"tags": "Html & Scss"
},
{
"id": "p4",
"title": "EvL First Design",
"date": "30/10/2021",
"desc": "Before the design and dev of this portfolio, I had made a portfolio where I only putted my socials link. All of that because I had no idea of what to put on it. Even if I was satisfied with the first version it did not in any case represented the mood and emotion I wanted it to give. And so I gave birth to the actual design of the website on the 11/11/2021",
"tags": "Nextjs & Scss"
},
{
"id": "p5",
"title": "Kelly's Portfolio",
"date": "3/07/2021",
"desc": "Sometimes after arriving at my college, I met a freshly made friend who wanted to publish her portfolio. She knew how to design and do plenty others thing. To She didn't really like to code and was making her website with Wix. To which I proposed to remake her website by coding it myself.",
"tags": "VueJs & Scss"
},
{
"id": "p6",
"title": "EthLny V2",
"date": "11-12/11/2021",
"desc": "After doing the amazing portfolio of Kelly, I was kind of disappointed with my own. So I decided to remake a new design. Use a Random language, study the color psychology, searched a tagline. And TA-DA here it is, the website you're in right now is the result of 7 hours of researching, designing and coding and debugging.",
"tags": "ReactJs, Scss & AOS librairy"
}
]
uj5u.com熱心網友回復：
將您的影像放入物件中，因此鍵將是來自 json 的 id，以及值 - 影像的 URL。現在，您只是將字串 like"p1"和"p5"into傳遞給src. 它不等同于使用 namep1或傳遞變數的值p5。
創建此類物件的快速方法是：
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
let images = {
p1, p2, p3, p4, p5, p6
}
/**
It is same as let images = {p1: p1, p2: p2, p3: p3, p4: p4, p5: p5, p6: p6};
*/
然后，在您的組件中使用 JSON 中的 id 作為鍵：
<img src={images[projectDetail.id]} alt=""/>
通過這種方式，您將獲得變數（和其他人）的實際值p1。
uj5u.com熱心網友回復：
我認為影像正在渲染，但它太小而無法看到
嘗試添加寬度和高度。
<img style={{width: 200px, height: 200px}} src={projectDetail.id} alt="" />
uj5u.com熱心網友回復：
我認為這將解決您的問題。而不是匯入每個影像，要么創建一個指向P*您的影像地址的地圖，要么以您可以執行以下操作的方式重命名您的影像：
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={`../../img/Project/${projectDetail.id}.png`} alt="" /> // <====the change
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
您還可以向 json 添加一個影像道具，指向正確的影像，但 json 可能無法更改。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/361633.html
上一篇：jq：將陣列映射到csv欄位標題
下一篇：將子評論添加到父評論陣列