关于Vue背景图打包之后访问路径错误问题的解决(vue设置背景图片全屏)

编辑：rootadmin

推荐整理分享关于Vue背景图打包之后访问路径错误问题的解决(vue设置背景图片全屏)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue背景图片怎么写,vue背景图片怎么写,vue背景色,.vue如何引进本地背景图片,vue背景色,vue背景色,vue背景色,vue背景图片怎么写,内容如对您有帮助，希望把文章链接给更多的朋友！

案例环境

通过vue-cli脚手架创建的vue项目

在项目打包的时候遇到了背景图片路径出错的问题，经过谷歌一番，发现是在配置的时候对图片的限制大小过小造成的

首先，出错点在url-loader上面。

这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于B的文件进行base转码，就是将图片转为base的格式。如果超过KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]') 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于KB的图片转为base，大于KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。

我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。

解决办法

1、使用小图片作为背景图片（建议）：

将小于KB的图片作为背景图片，如果有大于KB的图片作为img图片。

2、修改url-loader的limit值（不建议）：

从上面分析可知，当图片转为base就没有路径错误的问题，保证自己的背景图片都能转为base就可以防止该错误发生,将limit的值改为你的背景图最大那一张的值还大一点就行，换算为B的单位

3、将css不要单独打包出来（不建议）：

直接通过css-loader和style-loader打包到js中，js自动创建style标签，这样，背景图片的访问路径就是通过index.html路径访问了，不过该解决方案也不建议。会导致js过大，和图片过大不建议转base一个道理。

4、使用绝对路径的图片地址路径（建议）

建议：使用小图片作为背景图片，大图片用img标签。首先得分清背景图片和图片img的一些区别，就各人理解而言，背景图片是用来修饰网页的，与实际内容无关的东西，使用背景图片。如果与内容有关的东西都应该使用img标签算作网页结构的内容。修饰的图片尽量的小，也可以使用图片压缩等策略减小图片大小。

不建议：不建议修改limit值的原因是，url-loader的配置是针对整个项目的图片，修改了limit值也等于让html中img标签的图片也跟着进行了base的转换，而对于base的转换的缺点是他会增大图片原本的体积，如果对大图进行了转base会造成你的js文件过大，从而增加了加载js时间过长。

关于base

优点：base就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道，http请求每次建立都会占用一定的时间，对于小图请求来说，可能http建立请求的时间比图片下载本身还长。所以对小图进行base转码是优化http请求，保证页面加速渲染的一种手段。

缺点：base缺点就是之前提到的，他会增加图片本身的大小，对小图片来说，增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长，这种取舍是划算的。可是对于大图来说，这样的取舍是不划算的。

举个例子

例子：（以下数据都是随便模拟，看看思路就行）假如每次建立http时长为0.1s，网络传输为KB/s，每次转base增加体积为百分之二十；

一张KB的图片通过http请求下载为0.2s，他转为base之后为KB，在js下载中，增加了KB的大小，所以增加0.S 所以转base能优化0.s的页面加载速度；一张KB的图片通过http请求的速度是1.1s。转base之后大小为KB，他会增加js的大小KB，所以增加加载时间1.2s。这样一算下来，转为base之后，并不能优化页面加载速度，反而拖慢了0.1s的加载速度，为不划算。

思考：

在开发过程中，处理加载速度之外我们还得考虑并行下载的问题。如果全在一个js中，这个js没下载完成之前，图片也是没有下载的，也就是转base之后，可以认为js和图片是串行下载的。而走http请求，图片是可以和js并行下载的。所以实际上需要更小的图片才能更划算

标签: vue设置背景图片全屏

本文链接地址:https://www.jiuchutong.com/biancheng/375859.html 转载请保留说明！

上一篇：angular中ui calendar的一些使用心得(推荐)

下一篇：Angular4绑定html内容出现警告的处理方法(angular 嵌入html)