vue3圖片懶加載

懶加載就是延時加載，即當需要用到的時候再去加載

1. 減少首頁首次加載的數量，減少服務器的壓力
2. 網絡請求比較慢的時候, 提前給圖片添加一個像素比較低的占位圖片，或顯示大片空白,體驗更好一點。

安裝vue3-lazy

$ npm install vue3-lazy -S

main.ts

import App from './App.vue'
import lazyPlugin from 'vue3-lazy'
// use
const app = createApp(App);
app.use(lazyPlugin, {
  loading: require('@/assets/img/sp.png'), // 加載時默認圖片
  error: require('@/assets/img/sp.png')// 圖片失敗時默認圖片
})

在組件中，圖片標簽上使用 v-lazy

//圖片
<img v-lazy="info.urlImg" />