vue项目实现图片懒加载的简单步骤

1、安装vue-lazyload插件

npm install vue-lazyload --save-dev

2、在main.js中进行引用

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

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

注意：

这里存在一个坑，当图片放在 assets文件下 的时候，要使用上面的这种 require(‘相对路径’）的写法来进行引入。当图片放在 static文件下 的时候就可以直接写路径来进行引入，像下面的写法一样。

static文件图片引入方法：

Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../src/assets/image/error.png',
loading: '../src/assets/image/loading.gif',
attempt: 1
})

各个自定义配置属性含义：

3、使用（将图片设置为懒加载）

<img v-lazy="psdimg" class="psd" />

注意：

当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加 v-lazy-container="{ selector: &lsquo;img&rsquo; }"

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

<!--或者这种：-->

<div v-lazy-container="{ selector: 'img' }" v-html="content">
</div>

如果是这种情况的话，一定要使用 data-src 来指定路径，而不使用v-lazy。因为如果使用的是v-lazy的话，拿到了图片地址也会一直显示不出来。

来源：https://blog.csdn.net/jiangjunyuan168/article/details/124278948