图片导入异常：React误判图片位于src目录外的问题解决

以下是针对该问题的具体排查和解决步骤：

• 检查文件名大小写匹配
  create-react-app依赖的Webpack默认对文件名大小写敏感（类Unix系统尤为明显）。如果本地实际文件名是aalto.png（全小写），但导入语句写的是Aalto.png，就会触发路径错误。核对本地文件的实际名称，确保导入语句的大小写完全一致。

• 确认文件位置与路径层级
  仔细核对Main.js的位置：

  • 若Main.js在src/components/Main.js，../assets/Aalto.png是正确路径；
  • 若Main.js直接在src/Main.js，则应使用./assets/Aalto.png。
    同时确认Aalto.png确实在src/assets目录下，没有被误移到项目根目录或src外的其他位置。

• 排查文件扩展名与隐藏后缀
  检查系统是否隐藏了文件扩展名：比如文件实际是Aalto.png.jpg，但显示为Aalto.png，这会导致Webpack无法识别正确的文件类型。在系统设置中开启显示文件扩展名，确认文件后缀确实是.png。

• 清除开发服务器缓存
  停止开发服务器，执行以下命令清除缓存后重启：

  npm start --reset-cache
  

  也可以手动删除node_modules/.cache目录，再重新启动服务，避免缓存导致的路径识别异常。

• 尝试绝对路径导入（推荐）
  在项目根目录创建jsconfig.json（TypeScript项目则创建tsconfig.json），添加以下配置：

  {
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }
  

  之后即可用绝对路径导入图片：

  import Pic from 'assets/Aalto.png'
  

  这种方式能避免相对路径的层级错误，也更易维护。

• 检查自定义Webpack配置（仅针对eject过的项目）
  如果已经执行过npm run eject，打开config/webpack.config.js，检查file-loader或url-loader的配置，确保没有排除.png后缀，且include路径包含src目录。默认配置下无需修改，但自定义规则可能引发问题。

内容的提问来源于stack exchange，提问作者Andreas G.