vue3图片懒加载之vue3-lazy

关于图片懒加载，之前的vue2项目中一直用的vue-lazyload插件，参考地址： GitHub - hilongjw/vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application.，现在vue3项目中，发现作者罢工，不再友好支持了，陪伴了那么久，仍然感谢。

image.png

这不能忍，本着不重复造轮子原则，github上一顿搜，找到了 vue3-lazy 这款代替品，看文档使用步骤跟之前类似，简单操作之后，可用，也提升了项目首页加载速度，beautiful，赶紧记录一下使用步骤，方便他人。

安装命令

npm install vue3-lazy -S
//或者
yarn add vue3-lazy

main.ts 中初始化

import App from './App.vue'
import lazyPlugin from 'vue3-lazy'

createApp(App)
  .use(lazyPlugin, {
    loading: require('@/assets/images/default.png'), // 图片加载时默认图片
    error: require('@/assets/images/error.png')// 图片加载失败时默认图片
  })
  .mount('#app')

template中使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

参考地址：
github地址

点赞加关注，有缘不迷路