vue 异步懒加载图片

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

首先安装 `vue-lazyload`：

npm install vue-lazyload --save

然后在 main.js 中引入并使用：

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

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

在组件中，将 `src` 属性替换为 `v-lazy` 属性即可实现异步懒加载图片：

<template>
  <div>
    <img v-lazy="imgUrl">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: 'http://example.com/image.jpg'
    }
  }
}
</script>

其中 `imgUrl` 是你需要加载的图片地址。 `vue-lazyload` 会在图片进入可视区域时自动加载，从而优化页面性能。