vue3-lazy图片懒加载

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

1、npm安装

npm install vue3-lazy -S

2、main.js注册

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、页面使用

图片位置不变,地址切换可添加key更改图片显示

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

vue3-lazy图片懒加载_第1张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)