Vue 图片懒加载怎么做？

Vue 图片懒加载是指，当图片进入可视区域时，才加载图片，以节省带宽和提升网站性能的优化技术。

Vue 中可以使用 vue-lazyload 这个插件实现图片懒加载。

使用方法如下：

1. 安装 vue-lazyload 插件：

npm install vue-lazyload

2.在 main.js 中引入 vue-lazyload，并进行配置：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif') // 配置加载时显示的图片
})

直接使用

Vue.use(VueLazyload)

或者添加自定义选项

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

3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

参数选项说明

 

报错：

vue.runtime.esm.js?c320:4573 [Vue warn]: Failed to resolve directive: lazy

 

别担心，是版本问题，你应该是默认安装的lazyload版本，和vue2版本不匹配造成的，

 npm uninstall vue-lazyload       

 npm install vue-lazyload@1.3.3 --save-dev

2 图片要加【宽，高】，否则超出去了 ，样式就乱了