怎么使用v-lazy-image

v-lazy-image 是 Vue.js 的一个指令，用于实现图片懒加载。它可以延迟加载页面上的图片，当滚动到可见区域时再进行加载，从而提高页面加载速度和用户体验。

使用 v-lazy-image 指令需要先在项目中引入对应的插件，例如 vue-lazyload。然后在需要实现懒加载的图片元素上添加 v-lazy-image 指令，并将图片的 URL 作为指令的参数传入。

示例代码如下：

<template>
  <div>
    <img v-lazy-image="imageURL" alt="图片">
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload'

export default {
  data() {
    return {
      imageURL: 'https://example.com/image.jpg'
    }
  },
  directives: {
    'lazy-image': VueLazyload.directive
  }
}
</script>

在上面的示例中，我们首先引入了 vue-lazyload 插件，并将其指令添加到组件的 directives 属性中。然后，在模板中使用了 v-lazy-image 指令，并将图片的 URL 作为指令的参数传入。

需要注意的是，在使用 v-lazy-image 指令时，需要将图片的真实大小设置在元素上，例如通过 CSS 的 `width` 和 `height` 属性设置。这是因为在图片还未加载完成时，元素的宽高是无法计算的，如果不设置图片的真实大小，可能会导致元素尺寸异常。