vue中如何懒加载图片

在Vue中，你可以使用 `v-lazy` 指令来实现图片懒加载。这个指令可以在图片进入浏览器视口时加载图片。

首先，你需要在Vue项目中安装 `vue-lazyload` 插件。你可以使用npm或者yarn来安装：

npm install vue-lazyload --save

或者

yarn add vue-lazyload

安装完成后，在main.js中引入插件并配置：

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

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

现在你可以在你的组件中使用 `v-lazy` 指令了：

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageSrc: 'your-image-source.jpg'
      }
    }
  }
</script>

当图片进入浏览器视口时，`v-lazy` 指令会将图片的 `src` 属性设置为 `imageSrc` 的值。这时，图片就会被加载。