fix: optimize user avatar loading or error display (#702)

Co-authored-by: fengstats <feng2860984180@163.com>
cuixueshe · May 29, 2024 · 49460cd · 49460cd
1 parent 031cfbe
commit 49460cd
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/apps/client/components/Home/index.vue b/apps/client/components/Home/index.vue
@@ -2,9 +2,12 @@
   <div class="mt-8 flex w-full justify-between">
     <!-- 左侧头像区域 -->
     <div class="mr-16 hidden w-72 md:block">
-      <div class="mx-auto h-56 w-56 overflow-hidden">
+      <div
+        class="mx-auto h-56 w-56 overflow-hidden rounded-full border-2 border-gray-300 bg-gray-300 dark:border-gray-700 dark:bg-gray-700"
+      >
+        <!-- 通过给定高度来自适应拉伸图片，如果图片不存在或者加载失败则显示外层的背景色（没有宽度） -->
         <img
-          class="h-full w-full rounded-full border-2 border-gray-300 bg-gray-300 object-cover dark:border-gray-700 dark:bg-gray-700"
+          class="h-full object-cover"
           :src="userStore.userInfo?.picture!"
         />
       </div>

diff --git a/apps/client/components/Navbar.vue b/apps/client/components/Navbar.vue
@@ -55,14 +55,13 @@
             class="logged-in flex items-center"
           >
             <div
-              class="btn btn-square btn-ghost drawer-button"
+              class="h-8 w-8 cursor-pointer overflow-hidden rounded-full bg-gray-300 transition-all hover:scale-125 hover:opacity-90 dark:bg-gray-700"
               @click="handleShowUserMenu"
             >
-              <div class="avatar">
-                <div class="w-8 rounded-full">
-                  <img :src="userStore.userInfo?.picture!" />
-                </div>
-              </div>
+              <img
+                class="h-full object-cover"
+                :src="userStore.userInfo?.picture!"
+              />
             </div>
           </div>
           <!-- 登录/注册 -->