vue-lazyload 图片懒加载插件使用

一：安装

cnpm install vue-lazyload -D

二：main.js入口 引用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {   //参数设置
  preLoad: 1.3, 
  error: require('@/assets/error.jpg'),
  loading: require('@/assets/timg.gif'),
  attempt: 1
})

三：组件中使用  :  只要把  src  更换成  v-lazy 即可

<template>
  <div class="hello">
    <img v-for="item in img" v-lazy="item" width="100" height="100">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      img:[
        require('@/assets/logo.png'),
        require('@/assets/logo.png'),
        require('@/assets/logo.png'),
      ]
    }
  }
}
</script>

特别注意：图片地址引用  一定使用  require（...）