一、安装vue-lazyloa
npm install vue-lazyload --save-dev
二、在main.js中进行引用
// 引入插件
import VueLazyload from 'vue-lazyload'
// 注册插件
Vue.use(VueLazyload,{
loading:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ba1a579979fa0000018c1bb36942.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666836611&t=b56ea5b3be1760eaf82c00ce4e4dcf67' // 懒加载默认图片
})
三、将图片设置为懒加载
<div v-for="item in List1" :key="item.id" class="item1">
<img v-lazy="item.imageUrl" alt="" />
<p>{{ item.title }}</p>
<br />
<span>{{ item.priceStr }}</span>
</div>
四、如果在使用中 报错 如下图所示:
则是因为版本问题, 可安装低版本的 vue-lazyload
来解决该问题:
# 先写在原有的安装
npm uninstall vue-lazyload --save
# 再安装低版本的
npm install vue-lazyload@1.3.3 --save