vue中通过vue-lazyloa实现图片的懒加载

一、安装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=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2Fimg.zcool.cn%2Fcommunity%2F01ba1a579979fa0000018c1bb36942.gif&refer=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%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