Vue实现图片懒加载

在 Vue 中实现图片懒加载可以使用第三方库 vue-lazyload。以下是使用步骤：

1. 安装 vue-lazyload 库。

   npm install vue-lazyload
   

2. 在 main.js 文件中引入 vue-lazyload 并配置。

   import Vue from 'vue'
   import VueLazyload from 'vue-lazyload'
   
   Vue.use(VueLazyload, {
     preLoad: 1.3, // 预加载的高度比例
     error: '路径/error.png', // 加载失败时显示的图片路径
     loading: '路径/loading.gif', // 加载中显示的图片路径
     attempt: 1 // 尝试加载次数
   })
   

3. 在组件中使用懒加载图片。

   html"><template>
     <div>
       <img v-lazy="imagePath" alt="图片">
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         imagePath: '路径/图片.jpg' // 实际图片的路径
       }
     }
   }
   </script>
   

通过以上步骤，图片会在进入可视区域时才会加载，从而实现图片懒加载效果。你可以根据实际需要自定义预加载的高度比例、加载失败和加载中的图片路径等。

当然，如果你不想使用第三方库，也可以通过自己编写 Vue 指令或者监听滚动事件的方式手动实现图片懒加载。但使用现成的库能够更便捷地实现该功能。