vue项目使用webpack打包后,图片不显示

vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。

一颗帅气的猪头

5569人浏览 · 2022-11-01 11:29:21

一颗帅气的猪头 · 2022-11-01 11:29:21 发布

1.问题及解决原因

vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.

查看控制台也没有报错。

错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    // limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }

我们这里将limit注掉之后，重新打包，图片便可以显示。

2.发生此问题的原因

Webpack进行图片打包时，需要使用url-loader加载器（基本上创建项目之后都会有，没有的话需要进行安装），这个加载器中会有limit设置选项，如小于limit的设置值，则打包的时候会生成base64位的图片地址，超过了之后，会生成一个静态的图片文件，保存在img中。注掉之后就所有的图片都会以base64位的地址显示。

参考文档https://blog.csdn.net/weixin_45748460/article/details/104957626

原先只是知道了去掉limit属性之后可以使用，看了这个作者写的之后才明白原因，一个主做后端，没事学习学习前端的小白，有问题希望大佬指正。