vue3-lazy image lazy loading

vue3-lazy：https://github.com/ustbhuangyi/vue3-lazy

1. npm installation

npm install vue3-lazy -S

2. main.js registration

import {
    
     createApp } from 'vue'
import App from './app'
import lazyPlugin from 'vue3-lazy'

const app = createApp(App)
app.use(lazyPlugin, {
    
    
  loading: 'loading.png',
  error: 'error.png'
})
app.mount('#app')

3. Page usage

The position of the picture remains unchanged, and the address can be switched by adding a key to change the picture display

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