Vue 图片懒加载 v-lazy

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，运行正常

原文链接：https://blog.csdn.net/qq_40809206/article/details/125977256

安装vue-lazyload版本的时候，默认是安装3.0.0-rc.2，导致使用v-lazy的时候显示Failed to resolve directive: lazy 解决方案： 修改package.json里的下载版本为1.3.3，运行正常

安装vue-lazyload版本的时候，默认是安装3.0.0-rc.2，导致使用v-lazy的时候显示Failed to resolve directive: lazy
解决方案：修改package.json里的下载版本为1.3.3，运行正常