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

https://www.appsloveworld.com/reactjs/100/33/get-local-image-path-from-json-in-react

CodePudding user response：

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.

CodePudding user response：

Ok I have solved problem so I will write solution in case someone has a same problem:

1. create folder in "public" and call it whatever you want (but logical choice would be assets or images)...
2. path to image should be "folderName/image.jpg".

So no matter what is the absolute path don't target public just folder in public.

Also if images are in "src" folder you can't add them to "src" tag just import it that is why import work but .json path not (found it out after I solve it).