安装:
npm install vue-lazyload --save-dev
main.js 引入
import VueLazyload from ‘vue-lazyload‘ Vue.use(VueLazyload, { loading: require(‘@/assets/images/Lazy.png‘),//加载中图片,一定要有,不然会一直重复加载占位图 error: require(‘@/assets/images/Error.jpg‘) //加载失败图片 });
调用:
<div class="icon"> // 只要将src改为v-lazy即可 <img class="iconImg" v-lazy="item.picUrl" alt /> </div>
还可以插背景图
<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>
还有想实现像v-html语法的
<div v-lazy-container="{ selector: ‘img‘, error: ‘xxx.jpg‘, loading: ‘xxx.jpg‘ }"> <img data-src="//domain.com/img1.jpg"> <img data-src="//domain.com/img2.jpg"> <img data-src="//domain.com/img3.jpg"> </div>