Unable to get only image from local JSON in React

Question

I have a problem when I try to get images from .json file in react, path is ok, also all other data are displayed with no problem, image take space and link can be seen in inspect but image itself is not shown. I have try literally everything I can do, images imported in classic way work fine (direct import not from .json file).

My code:

// import demo from "../../assets/icons/demo.jpg";
// import metalPan from "../../assets/icons/metalPan.jpg";
// import Foodie from "../../assets/icons/Foodie.jpg";
import "./Projects.scss";
import ProjectData from "../../json/projects.json";

function Projects() {
  return (
    <>
      <h2 className="section_name">Projects</h2>
      <div className="projects">
        {/* Project card */}

        {ProjectData?.map((info) => {
          return (
            <>
              <div key={info?.id} className="project_wrraper">
                <div className="project">
                  <h3 className="project_name">{info.name}</h3>
                  <div className="project_tech">
                    {info.stack.map((data) => {
                      return (
                        <div>
                          <span>{data.language}</span>
                        </div>
                      );
                    })}
                  </div>
                  <p className="project_descr">{info.description}</p>
                  <div className="project_stack">
                    <button className="stack-btn">Live version</button>
                    <button className="stack-btn">GitHub</button>
                  </div>
                </div>
                <img
                  className="project_img"
                  src={`${info.image}`}
                  alt=""
                />
              </div>
            </>
          );
        })}
        {/* end of  project card */}
      </div>
    </>
  );
}

export default Projects;

[
  {
    "id": 1,
    "name": "Metal Pan",
    "stack": [
      {"language": "JavaScript"},
      {"language": "Sass"},
      {"language": "BootStrap"},
      {"language": "PHP"}
    ],
    "image": "../assets/icons/metalPan.jpg",
    "description": "Web Site made for company specialized in manufacturing and setting up industrial halls and metal roofs."
  },
  {
    "id": 2,
    "name": "Foodie",
    "stack": [
        {"language": "JavaScript"},
        {"language": "Sass"},
        {"language": "HTML5"}
      ],
    "image": "../assets/icons/Foodie.jpg",
    "description": "Personal project of responsive restaurant design with gallery, blog and menu!"
  },
  {
    "id": 3,
    "name": "eShop",
    "stack": [
        {"language": "React"},
        {"language": "CSS"},
        {"language": "HTML5"}
      ],
    "image": "../assets/icons/eShop.jpg",
    "description": "Personal project of eShop store using fake api, fetch all data, single product data and filter function."
  }
]

I have tried to use many solutions but no luck some I will provide here (just to name few):

React, load images local from json

get local image path from json in react

Answer 1

Are the images inside the public folder? The problem is very clearly that the image src is a relative path, but react will try to look them up in your public folder. If you replace the value of the images from "image": "../assets/icons/Foodie.jpg" to "image": "/assets/icons/Foodie.jpg" I think it should work.

Answer 2

You can solve this problem by following this approach-

1. Create a folder of any name (the recommended name would be assets or images) in the public directory.
2. So, the path to the image would be folderName/image.jpg.

So no matter what the absolute path is, it doesn't target the public folder.

Also if images are in the src folder you can't add them to the src tag. Just import it and that is why import work but the .json path doesn't.

Answer 3

Check out this SO solution, you may need to incorporate the require('../assets/...'); within your map function.

so it looks something like this.

<img className="project_img" src={require(${info.image})} alt=""/>