🐞 fix: 修复图片

.gitignore

@@ -16,9 +16,6 @@ coverage
 out
 .env
 
-/cypress/videos/
-/cypress/screenshots/
-
 # Editor directories and files
 .vscode/*
 .vscode

README.md

@@ -2,7 +2,7 @@
 
 > 一个简约的音乐播放器
 
-![main](/screenshots/SPlayer.jpg)
+![main](/screenshot/SPlayer.jpg)
 
 ## 说明
 
@@ -57,49 +57,49 @@
 - 📱 移动端基础适配
 - ~~🌐 `i18n` 支持~~
 
-## 🖼️ Screenshots
+## 🖼️ screenshot
 
 > 开发中，仅供参考
 
 <details>
 <summary>主页面</summary>
 
-![主页面](/screenshots/SPlayer%20-%20主页面.jpg)
+![主页面](/screenshot/SPlayer%20-%20主页面.jpg)
 
 </details>
 
 <details>
 <summary>播放页面</summary>
 
-![播放页面](/screenshots/SPlayer%20-%20播放页面.jpg)
+![播放页面](/screenshot/SPlayer%20-%20播放页面.jpg)
 
 </details>
 
 <details>
 <summary>发现页面</summary>
 
-![发现页面](/screenshots/SPlayer%20-%20发现页面.jpg)
+![发现页面](/screenshot/SPlayer%20-%20发现页面.jpg)
 
 </details>
 
 <details>
 <summary>歌单页面</summary>
 
-![发现页面](/screenshots/SPlayer%20-%20歌单页面.jpg)
+![发现页面](/screenshot/SPlayer%20-%20歌单页面.jpg)
 
 </details>
 
 <details>
 <summary>评论页面</summary>
 
-![发现页面](/screenshots/SPlayer%20-%20评论页面.jpg)
+![发现页面](/screenshot/SPlayer%20-%20评论页面.jpg)
 
 </details>
 
 <details>
 <summary>本地音乐</summary>
 
-![发现页面](/screenshots/SPlayer%20-%20本地音乐.jpg)
+![发现页面](/screenshot/SPlayer%20-%20本地音乐.jpg)
 
 </details>
 
@@ -162,7 +162,7 @@ docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:latest
 
 5. 将 `Build and Output Settings` 中的 `Output Directory` 改为 `out/renderer`
 
-   ![build](/screenshots/build.png)
+   ![build](/screenshot/build.png)
 
 6. 点击 `Deploy`，即可成功部署
 

electron-builder.yml

@@ -21,7 +21,7 @@ win:
   # 可执行文件名
   executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/icons/favicon-512x512.png
+  icon: public/imgs/icons/favicon-512x512.png
   # 构建类型
   target: nsis
 # NSIS 安装器配置
@@ -41,15 +41,15 @@ nsis:
   # 是否允许用户更改安装目录
   allowToChangeInstallationDirectory: true
   # 安装包图标
-  installerIcon: public/images/icons/favicon.ico
+  installerIcon: public/imgs/icons/favicon.ico
   # 卸载命令图标
-  uninstallerIcon: public/images/icons/favicon.ico
+  uninstallerIcon: public/imgs/icons/favicon.ico
 # macOS 平台配置
 mac:
   # 可执行文件名
   executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/icons/favicon-512x512.png
+  icon: public/imgs/icons/favicon-512x512.png
   # 权限继承的文件路径
   entitlementsInherit: build/entitlements.mac.plist
   # 扩展信息，如权限描述
@@ -71,7 +71,7 @@ linux:
   # 可执行文件名
   executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/icons/favicon-512x512.png
+  icon: public/imgs/icons/favicon-512x512.png
   # 构建类型
   target:
     - AppImage

electron.vite.config.mjs

@@ -106,22 +106,22 @@ export default defineConfig(({ mode }) => {
             background_color: "#efefef",
             icons: [
               {
-                src: "/images/icons/favicon-32x32.png",
+                src: "/imgs/icons/favicon-32x32.png",
                 sizes: "32x32",
                 type: "image/png",
               },
               {
-                src: "/images/icons/favicon-96x96.png",
+                src: "/imgs/icons/favicon-96x96.png",
                 sizes: "96x96",
                 type: "image/png",
               },
               {
-                src: "/images/icons/favicon-256x256.png",
+                src: "/imgs/icons/favicon-256x256.png",
                 sizes: "256x256",
                 type: "image/png",
               },
               {
-                src: "/images/icons/favicon-512x512.png",
+                src: "/imgs/icons/favicon-512x512.png",
                 sizes: "512x512",
                 type: "image/png",
               },

electron/main/index.js

@@ -117,7 +117,7 @@ class MainProcess {
       titleBarStyle: "customButtonsOnHover", // Macos 隐藏菜单栏
       autoHideMenuBar: true, // 失去焦点后自动隐藏菜单栏
       // 图标配置
-      icon: nativeImage.createFromPath(join(__dirname, "../../public/images/icons/favicon.png")),
+      icon: nativeImage.createFromPath(join(__dirname, "../../public/imgs/icons/favicon.png")),
       // 预加载
       webPreferences: {
         // devTools: is.dev,

electron/main/utils/createSystemTray.js

@@ -17,8 +17,8 @@ const createSystemTray = (win) => {
         join(
           __dirname,
           process.platform === "win32"
-            ? "../../public/images/icons/favicon.ico"
-            : "../../public/images/icons/favicon-32x32.png",
+            ? "../../public/imgs/icons/favicon.ico"
+            : "../../public/imgs/icons/favicon-32x32.png",
         ),
       )
       .resize({
@@ -63,8 +63,8 @@ const createIcon = (name) => {
   return nativeImage
     .createFromPath(
       isDarkMode
-        ? join(__dirname, `../../public/images/icons/${name}-dark.png`)
-        : join(__dirname, `../../public/images/icons/${name}-light.png`),
+        ? join(__dirname, `../../public/imgs/icons/${name}-dark.png`)
+        : join(__dirname, `../../public/imgs/icons/${name}-light.png`),
     )
     .resize({ width: 16, height: 16 });
 };

index.html

@@ -2,16 +2,16 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/imgs/icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/imgs/icons/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/imgs/icons/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%RENDERER_VITE_SITE_TITLE%</title>
     <meta name="apple-mobile-web-app-title" content="%RENDERER_VITE_SITE_TITLE%" />
     <meta name="author" content="%RENDERER_VITE_SITE_ANTHOR%" />
     <meta name="keywords" content="%RENDERER_VITE_SITE_KEYWORDS%" />
     <meta name="description" content="%RENDERER_VITE_SITE_DES%" />
-    <link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="mask-icon" href="/imgs/icons/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
   </head>

public/imgs/icons/favicon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663641871751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11550" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.764091 131.708086a446.145957 446.145957 0 1 0 446.145957 446.145957 446.145957 446.145957 0 0 0-446.145957-446.145957z m0 519.76004A71.829499 71.829499 0 1 1 583.59359 580.530919 72.275645 72.275645 0 0 1 511.764091 651.468126z" fill="#F55E55" p-id="11551"></path><path d="M802.205109 0.541175l-168.197026 37.030114a67.814185 67.814185 0 0 0-53.091369 66.029602V223.614153l3.569168 349.778431h114.213365V223.614153h108.859613a26.322611 26.322611 0 0 0 26.768758-26.322611V26.863786a26.768757 26.768757 0 0 0-32.122509-26.322611z" fill="#F9BBB8" p-id="11552"></path><path d="M511.764091 386.457428a186.935156 186.935156 0 1 0 186.935156 186.48901A186.935156 186.935156 0 0 0 511.764091 386.457428z m0 264.564552a71.383353 71.383353 0 1 1 71.383353-71.383353 71.383353 71.383353 0 0 1-71.383353 71.383353z" fill="#F9BBB8" p-id="11553"></path></svg>

public/imgs/icons/safari-pinned-tab.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2400 4444 c-14 -2 -63 -8 -110 -14 -407 -50 -737 -184 -1077 -436
+-124 -93 -348 -309 -406 -394 -100 -144 -190 -286 -223 -352 -101 -200 -199
+-506 -226 -707 -17 -127 -22 -436 -8 -546 40 -338 161 -687 327 -942 138 -213
+226 -319 372 -450 237 -211 471 -353 761 -460 147 -54 156 -57 330 -88 383
+-71 516 -67 965 25 76 16 288 91 370 132 28 13 66 31 85 38 39 16 158 88 270
+164 242 164 474 410 628 668 254 422 362 920 308 1408 -16 139 -23 172 -73
+344 -80 273 -188 496 -346 711 -104 143 -302 348 -404 421 l-48 34 -192 0
+c-184 0 -193 -1 -203 -21 -8 -14 -11 -271 -10 -882 1 -474 -1 -896 -5 -937
+-29 -306 -228 -596 -507 -737 -207 -104 -426 -126 -663 -66 -168 43 -300 125
+-453 283 -118 122 -203 310 -223 495 -10 86 -3 271 11 320 41 135 58 180 95
+248 103 193 330 376 545 441 157 47 364 49 513 5 38 -11 78 -19 90 -17 l22 3
+-3 635 c-2 349 -7 638 -10 642 -22 22 -413 47 -502 32z"/>
+</g>
+</svg>

src/components/Cover/MainCover.vue

@@ -40,10 +40,10 @@
                     class="loading-img"
                     :src="
                       type === 'mv'
-                        ? '/images/pic/video.jpg?assest'
+                        ? '/imgs/pic/video.jpg?assest'
                         : type === 'artist'
-                          ? '/images/pic/artist.jpg?assest'
-                          : '/images/pic/album.jpg?assest'
+                          ? '/imgs/pic/artist.jpg?assest'
+                          : '/imgs/pic/album.jpg?assest'
                     "
                     alt="song"
                   />

src/components/Cover/SpecialCoverCard.vue

@@ -18,7 +18,7 @@
           class: 'cover-img',
         }"
         class="cover-main-img"
-        fallback-src="/images/pic/default.jpg?assest"
+        fallback-src="/imgs/pic/default.jpg?assest"
         preview-disabled
         @load="
           (e) => {

src/components/Global/Menu.vue

@@ -294,7 +294,7 @@ const changeUserPlaylists = (data) => {
                 },
               },
               [
-                h(NAvatar, { src: v?.coverSize?.s, fallbackSrc: "/images/pic/album.jpg?assest" }),
+                h(NAvatar, { src: v?.coverSize?.s, fallbackSrc: "/imgs/pic/album.jpg?assest" }),
                 h(NText, null, () => [v.name]),
               ],
             )
@@ -333,7 +333,7 @@ const changeUserPlaylists = (data) => {
                 },
               },
               [
-                h(NAvatar, { src: v?.coverSize?.s, fallbackSrc: "/images/pic/album.jpg?assest" }),
+                h(NAvatar, { src: v?.coverSize?.s, fallbackSrc: "/imgs/pic/album.jpg?assest" }),
                 h(NText, null, () => [v.name]),
               ],
             )

src/components/List/CommentList.vue

@@ -25,7 +25,7 @@
                 >
                   <template #placeholder>
                     <div class="cover-loading">
-                      <img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="avatar" />
+                      <img class="loading-img" src="/imgs/pic/avatar.jpg?assest" alt="avatar" />
                     </div>
                   </template>
                 </n-image>

src/components/List/SongList.vue

@@ -62,7 +62,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/song.jpg?assest" alt="song" />
+                <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="song" />
               </div>
             </template>
           </n-image>

src/components/Modal/AddPlaylist.vue

@@ -32,7 +32,7 @@
         >
           <template #prefix>
             <n-image
-              :src="item?.coverSize?.s || '/images/pic/album.jpg?assest'"
+              :src="item?.coverSize?.s || '/imgs/pic/album.jpg?assest'"
               class="cover"
               preview-disabled
               lazy
@@ -44,7 +44,7 @@
             >
               <template #placeholder>
                 <div class="cover-loading">
-                  <img class="loading-img" src="/images/pic/album.jpg?assest" alt="song" />
+                  <img class="loading-img" src="/imgs/pic/album.jpg?assest" alt="song" />
                 </div>
               </template>
             </n-image>

src/components/Modal/CloudSongMatch.vue

@@ -52,7 +52,7 @@
         >
           <template #placeholder>
             <div class="cover-loading">
-              <img class="loading-img" src="/images/pic/song.jpg?assest" alt="loading-img" />
+              <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="loading-img" />
             </div>
           </template>
         </n-image>

src/components/Modal/Login.vue

@@ -13,7 +13,7 @@
   >
     <div class="login-content">
       <div class="title">
-        <img class="logo" src="/images/icons/favicon.png?asset" alt="logo" />
+        <img class="logo" src="/imgs/icons/favicon.png?asset" alt="logo" />
       </div>
       <!-- 登录方式 -->
       <n-tabs class="login-tabs" default-value="login-qr" type="segment" animated>

src/components/Modal/LoginQRCode.vue

@@ -9,7 +9,7 @@
           :class="['qr', qrStatusCode === 802 ? 'hidden' : null]"
           :size="156"
           :icon-size="30"
-          icon-src="/images/icons/favicon.png?asset"
+          icon-src="/imgs/icons/favicon.png?asset"
           error-correction-level="H"
         />
         <n-skeleton v-else class="qr" />

src/components/Nav/MainNav.vue

@@ -3,7 +3,7 @@
   <nav :class="{ 'main-nav': true, 'no-sider': !showSider }">
     <div class="left">
       <div :class="['logo', asideMenuCollapsed ? 'collapsed' : null]" @click="router.push('/')">
-        <!-- <n-avatar class="logo-img" src="/images/icons/favicon.png?asset" /> -->
+        <!-- <n-avatar class="logo-img" src="/imgs/icons/favicon.png?asset" /> -->
         <n-icon class="logo-img" size="30">
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/components/Nav/UserData.vue

@@ -30,7 +30,7 @@
         <img
           v-if="userLoginStatus && userData.detail?.profile?.vipType === 11"
           class="vip"
-          src="/images/pic/vip.png?assest"
+          src="/imgs/pic/vip.png?assest"
         />
         <n-icon depth="3" class="more">
           <SvgIcon icon="menu-down" />

src/components/Player/MainControl.vue

@@ -56,7 +56,7 @@
             >
               <template #placeholder>
                 <div class="cover-loading">
-                  <img class="loading-img" src="/images/pic/song.jpg?assest" alt="loading-img" />
+                  <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="loading-img" />
                 </div>
               </template>
             </n-image>
@@ -670,7 +670,7 @@ watch(
             justify-content: center;
             border-radius: 50%;
             animation: playerCoverRotate 18s linear infinite;
-            background: no-repeat url("/images/pic/record.png?assest") center;
+            background: no-repeat url("/imgs/pic/record.png?assest") center;
             :deep(img) {
               width: 40px;
               height: 40px;

src/components/Player/PlayerCover.vue

@@ -5,7 +5,7 @@
     <img
       v-if="playCoverType === 'record'"
       :class="{ pointer: true, play: playState }"
-      src="/images/pic/pointer.png?assest"
+      src="/imgs/pic/pointer.png?assest"
       alt="pointer"
     />
     <!-- 专辑图片 -->
@@ -28,7 +28,7 @@
     >
       <template #placeholder>
         <div class="cover-loading">
-          <img class="loading-img" src="/images/pic/song.jpg?assest" alt="loading-img" />
+          <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="loading-img" />
         </div>
       </template>
     </n-image>

src/components/Player/PrivateFm.vue

@@ -13,7 +13,7 @@
     <div
       class="overlay"
       :style="{
-        backgroundImage: `url(${privateFmSong?.coverSize?.m || '/images/pic/song.jpg?assest'})`,
+        backgroundImage: `url(${privateFmSong?.coverSize?.m || '/imgs/pic/song.jpg?assest'})`,
       }"
     />
     <!-- 内容 -->
@@ -33,7 +33,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/song.jpg?assest" alt="loading-img" />
+                <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="loading-img" />
               </div>
             </template>
           </n-image>

src/utils/formatData.js

@@ -141,7 +141,7 @@ const formatData = (data, type = "playlist", noTracks = false) => {
  */
 const getCoverUrl = (url, size = null) => {
   try {
-    if (!url) return "/images/pic/song.jpg?assest";
+    if (!url) return "/imgs/pic/song.jpg?assest";
     const sizeUrl = size
       ? typeof size === "number"
         ? `?param=${size}y${size}`
@@ -158,7 +158,7 @@ const getCoverUrl = (url, size = null) => {
     return imageUrl;
   } catch (error) {
     console.error("图片链接处理出错：", error);
-    return "/images/pic/song.jpg?assest";
+    return "/imgs/pic/song.jpg?assest";
   }
 };
 

src/utils/helper.js

@@ -90,7 +90,7 @@ export const getLocalCoverData = async (path, isAlbum = false) => {
       return lastCoverBlobUrl;
     } else {
       // 如果没有封面数据
-      return `/images/pic/${isAlbum ? "album" : "song"}.jpg?assest`;
+      return `/imgs/pic/${isAlbum ? "album" : "song"}.jpg?assest`;
     }
   } catch (error) {
     console.error("获取本地音乐封面出错：", error);

src/views/Artist/index.vue

@@ -18,7 +18,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="avatar" />
+                <img class="loading-img" src="/imgs/pic/avatar.jpg?assest" alt="avatar" />
               </div>
             </template>
           </n-image>

src/views/Comment.vue

@@ -26,7 +26,7 @@
         >
           <template #placeholder>
             <div class="cover-loading">
-              <img class="loading-img" src="/images/pic/song.jpg?assest" alt="loading-img" />
+              <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="loading-img" />
             </div>
           </template>
         </n-image>

src/views/Home.vue

@@ -78,10 +78,10 @@ const dailySongsCoverData = computed(() => {
   if (isLogin() && dailySongsData.value.data?.length) {
     const randomIndex = Math.floor(Math.random() * dailySongsData.value.data.length);
     dailySongsCover.cover =
-      dailySongsData.value.data[randomIndex]?.coverSize?.s || "/images/pic/like.jpg";
+      dailySongsData.value.data[randomIndex]?.coverSize?.s || "/imgs/pic/like.jpg";
     return dailySongsCover;
   }
-  dailySongsCover.cover = "/images/pic/cover-2.jpg";
+  dailySongsCover.cover = "/imgs/pic/cover-2.jpg";
   return dailySongsCover;
 });
 
@@ -93,10 +93,10 @@ const likeSongsCoverData = computed(() => {
     desc: "发现你独特的音乐品味",
   };
   if (isLogin() && userLikeData.value.playlists?.length) {
-    likeSongsCover.cover = userLikeData.value.playlists[0]?.coverSize?.s || "/images/pic/like.jpg";
+    likeSongsCover.cover = userLikeData.value.playlists[0]?.coverSize?.s || "/imgs/pic/like.jpg";
     return likeSongsCover;
   }
-  likeSongsCover.cover = "/images/pic/like.jpg";
+  likeSongsCover.cover = "/imgs/pic/like.jpg";
   return likeSongsCover;
 });
 

src/views/List/album.vue

@@ -19,7 +19,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/song.jpg?assest" alt="song" />
+                <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="song" />
               </div>
             </template>
           </n-image>

src/views/List/dj.vue

@@ -19,7 +19,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/song.jpg?assest" alt="song" />
+                <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="song" />
               </div>
             </template>
           </n-image>
@@ -34,7 +34,7 @@
           <div class="creator">
             <n-avatar
               :src="(djDetail.creator?.avatarUrl + '?param=300y$300').replace(/^http:/, 'https:')"
-              fallback-src="/images/pic/avatar.jpg?assest"
+              fallback-src="/imgs/pic/avatar.jpg?assest"
               round
             />
             <n-text class="nickname">{{ djDetail.creator?.nickname || "未知创建者" }}</n-text>

src/views/List/playlist.vue

@@ -19,7 +19,7 @@
           >
             <template #placeholder>
               <div class="cover-loading">
-                <img class="loading-img" src="/images/pic/song.jpg?assest" alt="song" />
+                <img class="loading-img" src="/imgs/pic/song.jpg?assest" alt="song" />
               </div>
             </template>
           </n-image>
@@ -39,7 +39,7 @@
               :src="
                 (playListDetail.creator?.avatarUrl + '?param=300y$300').replace(/^http:/, 'https:')
               "
-              fallback-src="/images/pic/avatar.jpg?assest"
+              fallback-src="/imgs/pic/avatar.jpg?assest"
               round
             />
             <n-text class="nickname">{{ playListDetail.creator?.nickname || "未知创建者" }}</n-text>

src/views/Local/albums.vue

@@ -23,7 +23,7 @@
           }"
           @click="chooseAlbum = item.album"
         >
-          <img class="cover" src="/images/pic/album.jpg?assest" alt="album-cover" />
+          <img class="cover" src="/imgs/pic/album.jpg?assest" alt="album-cover" />
           <div class="content">
             <span class="album">{{ item.album }}</span>
             <span class="artist">{{ item.artist }} · {{ item.num }} 首</span>

src/views/Player.vue

@@ -174,7 +174,7 @@
             >
               <template #placeholder>
                 <div class="cover-loading">
-                  <img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="song" />
+                  <img class="loading-img" src="/imgs/pic/avatar.jpg?assest" alt="song" />
                 </div>
               </template>
             </n-image>