vue3图片懒加载之vue3-lazy

1、

npm install vue3-lazy -S

 

2、

import lazyPlugin from 'vue3-lazy'

 

app.use(lazyPlugin, {

  // loading: '', // 图片加载时默认图片

  // error: '' // 图片加载失败时默认图片

})

 

 

3、

<img v-lazy="headImg">

或

<img v-lazy="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654855832&t=93e81b6429efb48b78f79f28aea58ffb'">