url-loader图片不显示、不报错踩坑

站长

2023年07月28日 20:41 · 阅读数 17

前言

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

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

如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈😀😀😀 点击链接学习交流群(前端微信群) 加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的图片资源不显示 url-loader图片不显示、不报错踩坑

直接粘贴base64字符串到浏览器访问直接显示的是一个小方块 url-loader图片不显示、不报错踩坑

作为背景图的图片也不显示 url-loader图片不显示、不报错踩坑

js、图片资源显示200加载成功 url-loader图片不显示、不报错踩坑

但是点开png资源请求，发现是这样的 url-loader图片不显示、不报错踩坑

开始踩坑

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。大家有好的解决方案欢迎评论区指点！

到这一步我们部署后图片都加载显示出来了，终于不报错了。 url-loader图片不显示、不报错踩坑

总结

首先还是自己掌握的知识不够，对webpack配置不熟、不深入。一天一个坑，不过没关系，踩过就学到了，学到就是赚到。毕竟成长的道路永远不会一帆风顺的！加油！