vue中使用vue-lazyload做图片懒加载

安装插件

注意：以下图片只可以使用url图片，本地图片加载不出

npm install vue-lazyload -S

main.js 里引入并使用

import VueLazyload from 'vue-lazyload' 

Vue.use(VueLazyload, {
    
    
  preLoad: 1.3,
  error: 'http://tc.qdscitech.net/images/2021/06/17/404.jpg', //加载出错时显示的图片
  loading: 'http://tc.qdscitech.net/images/2021/06/17/loading.gif', //加载中显示的图片
  attempt: 1
})

组件中直接使用

//  <!-- <img :src="item.iconUrl" alt="" /> -->
 <img v-lazy="item.iconUrl" :key="item.iconUrl" alt="" />
 //记得加key值