vue中实现图片的懒加载

一、安装vue-lazyload插件

npm install vue-lazyload --save-dev

---

二、在main.js中进行引用

import VueLazyload from "vue-lazyload";
 
Vue.use(VueLazyload);

//或者自定义配置插件
Vue.use(VueLazyload, {
preLoad: 1,
error: require('../src/assets/image/error.png'),
loading: require('../src/assets/image/loading.gif'),
attempt: 3
})

---

3、将图片设置为懒加载

<img v-lazy="psdimg"/>

注意：如果遇到v-for循环时可以进行如下写法

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//img1.jpg">
  <img data-src="//img2.jpg">
  <img data-src="//img3.jpg">  
</div>
  

 如果是这种情况的话，要使用 data-src 来指定路径，不要使用v-lazy。如果使用的是

v- lazy的话，图片可能就显示不出来