React中无法从本地JSON加载图片的问题求助

问题详情 #

在React项目中尝试从本地JSON文件加载图片时遇到如下问题：

• 图片路径确认无误，JSON中其他数据均可正常渲染
• 图片元素会占据对应布局空间，开发者工具中能看到图片链接，但图片无法显示
• 直接使用import导入图片的常规方式可以正常工作，已尝试多种方案仍无法解决

相关代码 #

组件代码（Projects.jsx） #

// 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={info.name}
                />
              </div>
            </>
          );
        })}
        {/* end of project card */}
      </div>
    </>
  );
}

export default Projects;

JSON数据（projects.json） #

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

可行解决方案 #

方案一：动态require加载图片 #

React打包工具（如Webpack）不会处理JSON中的相对路径，需用require动态导入资源：

1. 修改JSON文件中的image字段为纯文件名（去掉相对路径）：

   "image": "metalPan.jpg"
   

2. 在组件中修改img的src属性：

   <img
     className="project_img"
     src={require(`../../assets/icons/${info.image}`).default}
     alt={info.name}
   />
   

方案二：将图片放到public目录 #

把图片移动到项目根目录的public/assets/icons文件夹下，修改JSON中的路径为绝对路径：

"image": "/assets/icons/metalPan.jpg"

组件中直接保留原代码的src={${info.image}}即可，public目录下的资源会被直接复制到打包后的根目录，可直接通过绝对路径访问。

方案三：提前导入所有图片（适合图片数量少的场景） #

1. 在组件中导入所有需要的图片：

   import metalPan from "../../assets/icons/metalPan.jpg";
   import Foodie from "../../assets/icons/Foodie.jpg";
   import eShop from "../../assets/icons/eShop.jpg";
   

2. 创建图片映射对象：

   const imageMap = {
     metalPan,
     Foodie,
     eShop
   };
   

3. 修改JSON中的image字段为映射对象的键名：

   "image": "metalPan"
   

4. 组件中使用映射后的图片路径：

   <img
     className="project_img"
     src={imageMap[info.image]}
     alt={info.name}
   />
   

内容的提问来源于stack exchange，提问作者Davor86