React .tsx导入图片异常：仅特定命名图片可成功导入

云原生阿岚

2026-8-2

React TSX图片导入"module not found"问题解决办法

核对文件名细节：确保image2.jpg的实际文件名和代码里的完全匹配，包括大小写（部分系统如Linux/macOS区分文件名大小写，Image2.jpg和image2.jpg会被识别为不同文件）。
确认文件位置：直接在文件管理器中检查.tsx文件所在目录，确认image2.jpg确实存在，没有被误移或删除。
补全TypeScript类型声明：如果是TypeScript项目，项目根目录可能缺少图片类型声明文件。新建declarations.d.ts文件，添加以下内容：
```
declare module '*.jpg' {
  const src: string;
  export default src;
}
```
同时确保tsconfig.json的include数组包含这个声明文件，示例配置：
```
"include": ["src/**/*", "declarations.d.ts"]
```
清理缓存重启服务：打包工具的缓存可能导致新文件不被识别。停止开发服务器，删除对应缓存目录（如Create React App的node_modules/.cache、Vite的.vite），再重新启动项目。
规范导入语法：检查import image2 from './image2.jpg';语句，确保没有拼写错误或多余空格（你代码中这行前有多余空格，虽不影响语法，但尽量保持一致规范）。