在vue中呢

在Vue中，我们可以通过自定义指令来实现图片懒加载。下面是一个简单的自定义指令的示例代码：

Vue.directive('lazyload', {
  inserted: function(el, binding) {
    const img = new Image();
    img.src = binding.value;
    img.onload = function() {
      el.style.backgroundImage = `url(${binding.value})`;
      el.classList.add('loaded');
    };
  }
});

上面的代码中，我们定义了一个名为lazyload的自定义指令。在指令的inserted钩子函数中，我们首先创建了一个新的Image对象，并将要加载的图片赋值给它的src属性。当图片加载完成后，我们将图片的URL设置为元素的background-image属性，这样可以让图片作为元素的背景图展示出来。同时，我们也给元素添加了loaded类，用于展示真实的图片。

接下来，我们可以在需要懒加载的图片元素上使用v-lazyload指令，并将要加载的图片URL作为指令的值，如下所示：

<template>
  <div v-for="item in list" :key="item.id">
    <div class="image" v-lazyload="item.imageUrl"></div>
    <div class="title">{{ item.title }}</div>
  </div>
</template>

在上面的代码中，我们使用v-for指令遍历一个数据列表，并在每一项数据中使用v-lazyload指令来懒加载对应的图片。当图片加载完成后，我们可以根据需要使用CSS样式来展示真实的图片。

希望这个方法能够对您有所帮助。