16 【打包 图片懒加载】
约 306 字大约 1 分钟...
16 【打包 图片懒加载】
1.打包
vue.config.js
module.exports = {
//打包时不生成map文件(用来进行错误提示的文件,很占用空间)
productionSourceMap: false,
// 关闭ESLINT校验工具
lintOnSave: false,
}
pnpm run build
2.图片懒加载
懒加载vue-lazyload插件官网 插件的使用直接参考官方教程,很简单。
安装vue-lazyload插件
pnpm add vue-lazyload@1.3.3 --save-dev
在main.js中进行引用
import VueLazyload from "vue-lazyload";
//或者自定义配置插件
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('@/assets/image/error.png'),
loading: require('@/assets/image/loading.gif'),
attempt: 1
})
各个自定义配置属性含义:
![image-20220720143240479](https://i0.hdslb.com/bfs/album/4f3788e8fd79ec4841143a5824982956f983d9a2.png)
使用(将图片设置为懒加载)
<img v-lazy="psdimg" class="psd" />
注意: 当遇到是v-for循环的时候,或者用div包裹着img的时候,需要在div上面添加 v-lazy-container="{ selector: ‘img’ }"
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//aaa.com/img1.jpg">
<img data-src="//aaa.com/img2.jpg">
<img data-src="//aaa.com/img3.jpg">
</div>
<!--或者这种:-->
<div v-lazy-container="{ selector: 'img' }" v-html="content">
</div>
如果是这种情况的话,一定要使用 data-src 来指定路径,而不使用v-lazy。因为如果使用的是v-lazy的话,拿到了图片地址也会一直显示不出来。