Create React App项目中通过JSON加载图片无法显示的求助

你的图片放在src/assets/images目录下，但JSON里写的路径/assets/images/xxx.jpg是指向public目录下的资源——Create React App里，public是静态资源的根目录，直接通过URL访问的资源要放这里；而src里的资源会被webpack打包处理，不能直接用绝对URL访问，所以你现在的路径会导致浏览器请求不存在的资源，出现404。

下面是两种可行的解决方案：

方案1：将图片移到public目录（最简单） #

• 在public目录下创建assets/images文件夹，把你的图片移进去
• 保持JSON里的imageUrl不变："/assets/images/centredetherapiemanuelle.jpg"
• 重新启动项目，图片就能正常加载了

方案2：保留图片在src目录，动态解析资源路径 #

如果不想移动图片，需要修改JSON和组件代码，让webpack正确解析src里的图片：

1. 修改JSON文件，只存图片的文件名，比如：

{
  "name": "Centre de thérapie manuelle",
  "imageName": "centredetherapiemanuelle.jpg",
  "category": "Professionnel",
  "description": "Site vitrine réalisé à partir du CMS d'entreprise",
  "role": "Intégration de la maquette via le CMS d'entreprise, responsive",
  "url": "https://www.centredetherapiemanuelle.lu/fr/kinesitherapie",
  "technologies": ["html5", "css3", "sass", "bootstrap"]
}

2. 修改ProjectsInsert组件，用require动态加载图片：

const ProjectsInsert = ({ projet }) => {
  // 动态拼接路径并解析webpack打包后的资源
  const imageSrc = require(`../assets/images/${projet.imageName}`).default;

  return (
    <li>
      <div className="img-container">
        <img src={imageSrc} alt={projet.name} />
      </div>
      <div className="infos-container">
        <h4>{projet.name}</h4>
        <h5>{projet.category}</h5>
        <p>{projet.description}</p>
        <a target="_blank" rel="noreferrer" href={projet.url}>
          Visiter le site
        </a>
      </div>
    </li>
  );
};

额外排查点 #

• 检查文件名和路径的大小写：Linux/macOS环境下文件名区分大小写，比如Centredetherapiemanuelle.jpg和centredetherapiemanuelle.jpg是两个不同的文件
• 打开浏览器控制台的Network标签，查看图片的请求URL，确认是不是指向了错误的位置（比如404状态）
• 确认JSON文件里的图片名和实际文件名完全一致，包括后缀（比如.jpg和.jpeg不要弄混）

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