添加vue3-lazyload组件

src/main.js

@@ -2,5 +2,21 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import VueLazyLoad from 'vue3-lazyload'
 
-createApp(App).use(store).use(router).mount("#app");
+createApp(App)
+.use(store)
+.use(router)
+.use(VueLazyLoad, {
+  // options...
+  // loading: () => {
+  //   console.log('loading')
+  // },
+  // error: () => {
+  //   console.log('error')
+  // },
+  // loaded: () => {
+  //   console.log('loaded')
+  // }
+})
+.mount("#app");

src/views/discover/Recommend.vue

@@ -43,7 +43,7 @@
         >
           <div class="c2-list">
             <div class="play-btn">
-              <img :src="song.album.blurPicUrl" />
+              <img v-lazy="song.album.blurPicUrl" />
               <n-button
                 text
                 class="start-play-bg"
@@ -244,12 +244,12 @@ getBanner(0)
 
 //#region 最新音乐
 let topSongs = ref([]);
-// topSongs.value = store.getters.cache('topSongs')
-if(store.getters.cache('topSongs'))
-{
-  topSongs.value = store.getters.cache('topSongs')
-  console.log('载入Caches');
-}
+topSongs.value = store.getters.cache('topSongs')
+// if(store.getters.cache('topSongs'))
+// {
+//   topSongs.value = store.getters.cache('topSongs')
+//   console.log('载入Caches');
+// }
 //最新音乐
 getTopSong()
   .then((res) => {
@@ -404,6 +404,7 @@ getPersonalizedMV()
 
   img {
     width: 60px;
+    height: 60px;
     border-radius: 4px;
   }