Vue2中图片懒加载组件V-lazy的使用

一、安装组件

npm i vue-lazyload@1.2.4
这里我选择的是1.2.4版本
版本高了可能运行出来会报 [Vue warn]: Failed to resolve directive: lazy 错误

 二、全局引入

main.js中引入

import VueLazyLoad from 'vue-lazyload' // 全局引入vue-lazyload

Vue.use(VueLazyLoad)

三、页面中使用

在你的所需页面中使用

<template>
  <div>
    <img class="imgA" v-lazy="imgObj" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgObj: {
        src: 'https://picshack.net/ib/1jQL6a4ufo.jpg', // 真正的图片地址
        error: require('@/assets/LOADING.gif'), // 加载失败的时候展示的图片(这里好像不能使用在线地址，会报错)
        loading: require('@/assets/LOADING.gif'), // 加载中展示的图片(这里好像不能使用在线地址，会报错)
      },
    }
  },
}
</script>

<style lang="less"></style>

四、插件详情

详情见：vue-lazyload - npm