1:安装vue-lazyload
npm i vue-lazyload -S
2:在main.js中引入
import VueLazyload from "vue-lazyload"
Vue.use(VueLazyload, {
preload: 1.3, // 表示lazyload元素距离底部距离百分比
loading: require('xxx.png'), // 正在加载时显示的图片路径
error: require('xxx.png'), // 图片加载失败时显示的图片路径
attempt: 5, // 图片加载失败后重试次数,默认3
})
3:标签上使用 替换:src="imgSrc"为v-lazy="imgSrc"
<image v-lazy="imgSrc" />
常用参数:
VueLazyload参考文档:vue-lazyload - npm
安装vue-lazyload版本的时候,默认是安装3.0.0-rc.2,导致使用v-lazy的时候显示Failed to resolve directive: lazy
解决方案: 修改package.json里的下载版本为1.3.3,运行正常