安装插件
注意:以下图片只可以使用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值