vue3图片懒加载

630 阅读1分钟

再说vue3的图片懒加载之前,我在vue2项目中一直用的vue-lazyload插件,现在vue3项目中,发现不再友好支持了,仍然感谢。

image.png

安装命令

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

maints文件中use

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

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

模板中使用

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