Vue项目中如何实现图片懒加载（附完整代码）

安装vue-lazyload

npm install vue-lazyload
//或者
yarn add vue-lazyload

引入vue-lazyload

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)

模板中调用lazyload指令

<template>
  <img v-lazy="imageURL" alt="我是图片" src="占位符图片">
</template>

配置lazyload

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

以上是编程学习网小编为您介绍的“Vue项目中如何实现图片懒加载（附完整代码）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。