Vue的图片懒加载很简单
(1) 下载插件 npm install vue-lazyload --save 或 yarn add vue-lazyload
(2) main.js 引入插件
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
或
Vue.use(VueLazyload, {
preLoad: 1.3, // 提前加载高度(数字 1 表示 1 屏的高度) 默认值:1.3
error: 'dist/error.png', // 当加载图片失败的时候
loading: 'dist/loading.gif', // 图片加载状态下显示的图片
attempt: 3 // 加载错误后最大尝试次数 默认值:3
}
(3)在组件中使用:
对于img
v-lazy="'/static/img/product/' + productshow1"
// productshow1为路径地址,直接将变量写在data中使用 data: () =>{productshow1:"productshow1.png" }
对于背景图片
v-lazy:backgroundImage = "showMessage.imageUrl" //showMessage.imageUrl为变量名,图片的地址