vue自定义指令图片懒加载,并设置占位图

main.js

Vue.directive('lazy', {bind(el, binding) {// 设置占位图el.src = defaultImg;const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {// 加载真实图片el.src = binding.value;//解除观察，确保图片加载仅触发一次observer.unobserve(el);}});});observer.observe(el);}
});

<img class="product-image" v-lazy="info.mainImg" :alt="info.subject"></img>