前言

一次在vue-cli3、vue2、webpack4项目中使用url-loader时遇到了图片不显示、不报错问题。查了一些网上资料，也问了一些同行。一路踩坑，真的要裂开了。

项目依赖版本：
vue：2.6.12
webpack：4.46.0
url-loader：4.1.4

如果文章对你有帮助，可以点击链接关注我的掘金社区账号更多技术分享请移步我的掘金哦~ 😀😀😀

点击链接学习交流群(前端微信群) - 掘金 (juejin.cn) 加vx拉你进 前端学习交流群 让我们一起 ~~好好学习~~（🐟🐟🐟）吧😎😎😎

安装使用

npm i -D url-loader

vue.config.js配置：

   configureWebpack: {
        module: {
          rules: [
                {
                  test: /\.(png|jpe?g|gif|svg|ttf|woff2|woff)(\?.*)?$/,
                  use: [
                    {
                      loader: 'url-loader',
                      options: {
                        name: 'img/[name].[hash:6].[ext]',
                        limit: 10 * 1024 // 小于这个值的图片进行 base64 编码，大于等于的图片则进行单独的打包
                      }
                    }
                  ]
                }
              ]
            },
          },

配置完 build 打包后也没有问题，图片也进行处理了，当部署后发现图片不显示，且http请求显示200，也不报错！

图片不显示不报错（就显示一个小方块！）

先开始以为是路径问题（可是没报错也没404啊！）仔细排查发现打包后的目录下确实也有对应未转换base64的图片，直接浏览器输入地址也是不显示！

打包为base64的图片资源不显示

直接粘贴base64字符串到浏览器访问直接显示的是一个小方块

作为背景图的图片也不显示

js、图片资源显示200加载成功

但是点开png资源请求，发现是这样的

开始踩坑

url-loader版本问题

有网友说可能是版本问题，我分别降级不同版本测试后都没有解决！

网上一些关于url-loader的配置

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  exclude: /node_modules/,
  type: 'javascript/auto',
  use: [
    {
      loader: 'url-loader',
      options: {
        esModule: false,
        name: 'img/[name].[hash:3].[ext]',
        limit: 1024 * 10,
        context: path.resolve(__dirname, './src'), 
        publicPath: './'
      }
    }
  ]
}

网上大部分说通过一些配置可解决，不过大部分针对的是 webpack5（待验证）

我也依次尝试配置如下：

type: 'javascript/auto'``publicPath: './'``context: path.resolve(__dirname, './src')

测试后发现加上这些配置也没有解决问题。

file-loader

有的说 url-loader 封装了 file-loader。使用url-loader时需要安装file-loader但不需要配置。我经过测试发现不安装也是可以的

html-loader

有人说是需要安装配置 html-loader，这样html文件的图片才能加载出来

安装依赖、增加loader：

    {
       test: /.html$/,
       use: {
         loader: 'html-loader',
         options: {
           esModule: false
         }
       }
     }

用了1.x以上版本打包都会报错，1.x以下版本不报错也没解决。

html-withimg-loader

流程同上，也未解决。

开始解决

我刚开始所有配置都是直接在vue.config.js 下的configureWebpack字段中配置的；后来发现是好像没生效！！！查资料学习后发现这里配置好的内容最终会被merge到脚手架的默认配置中
vue-cli脚手架默认的webpack配置中也配置了url-loader的！我裂开了。

需要从chainWebpack中清除默认配置、或者获取指定loader后覆盖才能生效！！！

所以我这里是在chainWebpack中获取到默认处理images的loader，然后清空默认配置，然后在 configureWebpack-module-rules中配置新的url-loader规则

清除默认配置

chainWebpack: config => {
   const imgAllLoader = config.module.rule('images')
   imgAllLoader.uses.clear()
}

url-loader配置具体参数以loader官网为准，其余网上查到的参数都是不生效的
常用配置：

{
  loader: 'url-loader',
  options: {
    esModule: false, // 不转换esm规范
    name: 'img/[name].[hash:3].[ext]',
    limit: 1024 * 10, 
    fallback: 'file-loader', // 大于limit时，会使用file-loader也可以指定loader处理，默认值就是file-loader
  }
}

配置完打包后大部分图片已经出来了，小部分图片又出现如下问题：

img的src出现[object Module]问题解决

url-loader的 esModule 默认为 true，使用的是es6（esm）规范如：import xxx from 'xxx.png'

而我们在vue2，data中引入图片使用的是 commonjs 规范如： require(‘xxx’)

所以添加： esModule: false, 选项解决
```
 {
  loader: 'url-loader',
  options: {
    esModule: false, // 不转为 esModule
    limit: 1024 * 10,
    name: 'img/[name].[hash:3].[ext]', 
    fallback: 'file-loader'
  }
  }
```
svg图片报错

error on line 1 at column 1: Document is empty

直接访问图片报错：

查资料看到这篇文章（待验证） SVG报错error on line 39 at column 26: Namespace prefix xlink for href on script is not defined - horizon~ - 博客园 (cnblogs.com)

也有文章说不建议svg格式转为base64，反而会更大。
我的项目中svg格式图片用的也不多，然后就直接在url-loader配置中test中去除了 svg。大家有好的解决方案欢迎评论区指点！