Невозможно получить только изображение из локального JSON в React

У меня проблема, когда я пытаюсь получить изображения из файла .json в реакции, путь в порядке, также все остальные данные отображаются без проблем, изображение занимает место, и ссылку можно увидеть при проверке, но само изображение не отображается. Я пробовал буквально все, что мог, изображения, импортированные классическим способом, работают нормально (прямой импорт не из файла .json).

Мой код:

// 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."
  }
]

Я пытался использовать много решений, но не повезло, некоторые из них я приведу здесь (просто назвать несколько):

Реагируйте, загружайте изображения локально из json

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

🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.