React加载JSON中图片路径报错：Cannot find module '.png'

这个问题我之前碰到过，本质是React用的构建工具（比如webpack、Vite）不会自动解析JSON字符串里的图片路径——构建工具需要在编译时明确识别资源引用，而JSON里的纯文本路径只会被当作普通字符串，不会被处理成有效的模块路径。

给你几个实用的解决办法：

方法1：动态拼接路径并使用require（Create React App 适用） #

在JSON文件里只存图片的文件名（比如"image": "project-cover.png"），然后在组件里用require动态加载：

{projects.map(project => (
  <div key={project.id}>
    <img 
      src={require(`../assets/images/${project.image}`).default} 
      alt={project.name} 
    />
  </div>
))}

注意：路径要相对于当前组件文件，不是相对于JSON文件。如果是CRA 2+版本，require返回的对象需要取.default才能拿到正确的URL。

方法2：用new URL动态生成路径（Vite 或 React 18+ 适用） #

如果你的项目用Vite构建，或者用了新版React，可以用new URL来处理：

{projects.map(project => (
  <div key={project.id}>
    <img 
      src={new URL(`../assets/images/${project.image}`, import.meta.url).href} 
      alt={project.name} 
    />
  </div>
))}

这种方式会让构建工具正确解析路径，同时避免相对路径混乱的问题。

方法3：把图片放到public文件夹 #

如果不想折腾构建工具的资源解析，直接把图片放到项目根目录的public文件夹里（比如public/images/），然后在JSON里写绝对路径：

// importantProject.json
[
  {
    "id": 1,
    "name": "我的项目",
    "image": "/images/project-cover.png"
  }
]

组件里直接用这个路径：

<img src={project.image} alt={project.name} />

这种方式的好处是简单，但public文件夹里的资源不会被构建工具优化（比如压缩、哈希命名），适合图片数量不多的场景。

另外要排查下常见的小问题：

• 确认JSON里的路径拼写没有错误，比如漏写文件后缀、大小写不对（Linux/macOS下路径区分大小写）
• 检查图片文件确实存在于你指定的目录下

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