一般图片加载会用file-loader或url-loader插件是没有问题的。

比如，如下配置：

module.exports = {
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.(png|jpg|gif)$/,
        use: "file-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        //可以做限制，如：图片小于200k，用base64转化，否则用url-loader产生真实图片
        use: {
          loader: "url-loader",
          options: {
            limit: 200 * 1024,
          }
        }
      },
    ]
  }
}

但在webpack5以上版本，用这两个加载器加载的图片无法正常显示，打包出来的图片文件也没有实质性内容，是个无法预览的空文件。

换成webpack5的配置就是这样：

  module: {
    //模块
    rules: [
      {
        test: /\.(jpg|png|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 200 * 1024
          }
        }
      },
    ]
  }

是不是比之前精简很多？

而且不需要下载file-loader或url-loader插件，直接内置支持！

亲测可用，有问题可以给我留言。