How to fix the Broken Image icon in React-CodePudding

I tried to import the image to the Data.js from img folder, but it is displayed as a broken image. I am not so sure how to fix this.

I used Data.js to store all the items imformation including the image path. Then I use the useState and props to access these item info in the Project.js file. (All other information like the item.title worked successfully except for the img)

The folder path: enter image description here

The code in Data.js:

const GalleryData = [
    {
        id: 1,
        title: "Plants vs. Zombie Clone",
        image: './img/PvsZ.jpg',
        year: "DD/Mon/Year",
        role: ["Back end developer"],
        type: ["Coding", "type2"],
        desc: "hello"
    },

The code in Project.js file:

<div className="gallery">
  
            {data.map((item)=>
              <div className="card-holder" key={item.id}>
                <div className="card">
                  <h2 className="item-name">{item.title}</h2>
                  <img src={item.image} alt="project item" />
                  <div className="item-dis">{item.desc}</div>

                </div>
              </div>
            )}

</div>

The result on the website: enter image description here

I have tried with other images or change the image from png to jpg for checking if it is the image feature that caused it. But nothing changed.

CodePudding user response：

Well, if you wanna use image paths in react you need to add them to the public folder and not the src folder. Just move the img folder to the public folder and then change the image URL to img/PvsZ.jpg. If you wanna use local paths then check out How do I reference a local image in React?