Webpack+React项目中图片无法正常显示问题求助

嘿，我之前也踩过这个坑！你看到的module.exports = __webpack_public_path__ + "..."这种字符串，本质是file-loader/url-loader的模块导出方式和你的代码逻辑不兼容导致的，下面给你几个靠谱的解决办法：

方法1：修改file-loader/url-loader配置，关闭ES模块导出 #

这是最直接的修复方式。新版的file-loader/url-loader默认会用ES模块语法导出图片路径（比如export default 'xxx.jpg'），但如果你的Webpack配置或代码解析逻辑没适配这个，就会把整个导出的模块内容当成字符串显示出来。

打开你的webpack.config.js，找到处理图片的loader规则，加上esModule: false选项：

针对file-loader的配置： #

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash].[ext]', // 你的输出路径配置
              esModule: false, // 关键：关闭ES模块导出
            },
          },
        ],
      },
    ],
  },
};

针对url-loader的配置： #

如果用的是url-loader（小图转base64，大图自动用file-loader处理），同样加上esModule: false：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的图片转base64
              name: 'images/[name].[hash].[ext]',
              esModule: false, // 关键配置
            },
          },
        ],
      },
    ],
  },
};

修改完重新打包，再用<img src={Img}>就能正常显示图片了。

方法2：升级到Webpack 5，使用内置的Asset Modules #

如果你的项目可以升级Webpack到5.x版本，更推荐用Webpack内置的asset/resource替代file-loader——这是官方推荐的方案，配置更简洁，也不会有导出方式的问题：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash].[ext]' // 图片输出路径
        }
      },
    ],
  },
};

这种配置下，你原来的import Img from '/image/source/image.jpg'写法完全不用改，直接就能拿到正确的图片URL。

方法3：临时修复（不推荐） #

如果暂时不想改配置，也可以在使用的时候取导出对象的default属性：

import Img from '/image/source/image.jpg'

// 在组件里这样用
<img src={Img.default} />

不过这种方法只是绕开了问题，不如前面两种方案彻底，还是建议优先调整loader配置。

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