vue中如何懒加载图片

在Vue中，可以使用`vue-lazyload`插件来实现图片的懒加载。具体步骤如下：

1. 安装`vue-lazyload`插件

可以使用npm或yarn来安装：

npm install vue-lazyload --save

yarn add vue-lazyload

2. 引入并配置插件

在Vue项目的`main.js`文件中，引入并配置插件：

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

Vue.use(VueLazyload, {
  // 配置项
})

其中，配置项可以包括以下属性：

- `loading`：在图片加载过程中显示的占位图。
- `error`：当图片加载失败时显示的占位图。
- `attempt`：图片加载失败时的重试次数。
- `lazyComponent`：使用 Vue 组件作为占位符。
- `observer`：是否使用IntersectionObserver监听元素位置，可提升性能。

3. 在组件中使用

在需要懒加载的图片中，将`src`属性替换为`v-lazy`指令即可：

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

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

这样，在滚动到该图片时，会自动加载图片，提升页面性能。