React项目中使用require与Webpack无法加载本地图片求助

你的核心问题大概率出在Webpack的loader配置冲突上，同时还有几个潜在排查点可以逐一验证：

1. 修复Webpack Loader的重复匹配问题 #

你当前为jpg|png|svg类型文件配置了两条独立的loader规则（url-loader和file-loader），这会导致Webpack无法确定用哪个loader处理文件，最终引发加载异常。其实url-loader本身支持通过fallback选项，在文件超过指定大小后自动调用file-loader处理，完全不需要单独配置两条规则。

修改你的webpack.config.js中的图片加载规则为：

{
  test: /\.(jpg|png|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000, // 小于10kb的文件转base64嵌入代码
        fallback: 'file-loader', // 超过limit的文件用file-loader输出到静态目录
        name: '[path][name].[hash].[ext]' // 可选，控制输出文件的路径与命名规则
      }
    }
  ]
}

2. 验证文件路径的正确性 #

虽然Webpack构建无报错，但依然要确认图片路径和项目目录结构是否匹配：

• 假设你的组件文件在src/components/MyComponent.js，图片在src/assets/svg/ic_planning.svg，那么正确的相对路径应该是../assets/svg/ic_planning.svg（注意层级：从components目录上跳一级到src，再进入assets）
• 检查文件名大小写：Linux/macOS系统下文件名区分大小写，如果实际文件名是IC_Planning.svg而你写的是ic_planning.svg，会导致文件找不到

3. 排查React中的引入与使用 #

两种引入方式（require/import）都是可行的，可以通过日志确认路径是否正确：

• 在组件中添加日志输出：

  import icon from '../../assets/svg/ic_planning.svg';
  console.log('Image resolved path:', icon); // 查看输出的路径是否符合预期
  

• 然后在浏览器中直接访问这个路径（比如http://localhost:3000/static/media/ic_planning.xxxx.svg），如果无法打开，说明文件没有被正确打包输出

4. 确认Webpack的output.publicPath配置 #

如果开发服务器或生产环境部署路径有特殊设置，publicPath配置错误会导致图片加载失败：

• 开发环境建议设置为/：

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  }
  

• 生产环境如果部署在子目录（比如https://example.com/my-app/），则需要设置为/my-app/

5. 清理Webpack缓存 #

有时候旧的缓存会导致配置修改不生效，尝试：

• 重启webpack-dev-server
• 删除node_modules/.cache目录（webpack-dev-server的缓存目录）
• 执行npm run clean（如果你的package.json里配置了清理脚本）

完成以上步骤后，重新构建项目，应该就能正常加载本地图片了。

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