vue3图片懒加载vue3-lazy的使用

github地址:https://github.com/ustbhuangyi/vue3-lazy

$ npm install vue3-lazy -S

main.js:

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>

你可能感兴趣的:(vue3,vue.js)