React项目导入图片失败提示Module Not Found，多种导入方式均无效求助

数据老陈

2026-10-5

React项目图片引入失败常见解决方案

import引入（src目录下存放图片，推荐用法）
这是CRA官方推荐的引入方式，webpack会对引入的图片做压缩、哈希重命名等优化，如果引入失败优先排查两点：
1. 文件名大小写、后缀名是否和实际文件完全匹配，打包工具对文件名大小写敏感，CompanyLogo.png和companyLogo.png会被判定为两个不同文件
2. 相对路径是否正确：如果App.js存放在src根目录，images文件夹也在src根目录，./images/companyLogo.png路径才有效；如果App.js在src的子目录下，需要调整相对路径层级，比如../images/companyLogo.png
  正确代码示例：
```
import logo from "./images/companyLogo.png";

function App() {
  return <img src={logo} alt="公司logo" />
}
```
require引入（src目录下存放图片）
新版CRA中require返回的是ES模块对象，需要取default属性才能拿到真实的图片路径，原有写法缺少该属性所以会失效，正确写法：
```
<img src={require("./images/companyLogo.png").default} alt="公司logo" />
```
public目录存放图片
该方法的原理是public下的资源不会被webpack打包处理，会直接复制到构建产物的根目录下，引入时必须以/开头代表从站点根路径寻址，否则在多级子路由页面会出现路径匹配错误，正确写法：
```

<img src="/images/companyLogo.png" alt="公司logo" />
```