From 567223eac3a1ec92e085f3130cce5471672a50e9 Mon Sep 17 00:00:00 2001
From: Chuck1sn <chuck1inzl@gmail.com>
Date: Sun, 15 Jun 2025 21:35:29 +0800
Subject: [PATCH] fix img

---
 frontend/src/components/Headbar.vue | 5 ++++-
 frontend/src/views/UserView.vue     | 8 +++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Headbar.vue b/frontend/src/components/Headbar.vue
index 2f12a61..85a6d41 100644
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -39,7 +39,10 @@
               <button type="button" id="dropdown-button" class="flex text-sm bg-gray-800 rounded-full cursor-pointer"
                 aria-expanded="false" data-dropdown-toggle="dropdown-user">
                 <span class="sr-only">打开用户菜单</span>
-                <img class="w-8 h-8 rounded-full" :src="getUserAvatarUrl(user.avatar)" alt="user photo">
+                <div
+                  class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
+                  <img v-if="user.avatar" :src="getUserAvatarUrl(user.avatar)" class="object-cover">
+                </div>
               </button>
             </div>
             <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm  "
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 259f702..1a4b5b1 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -22,8 +22,8 @@
       <div v-for="user in users" :key="user.id" class="p-4 bg-white rounded-lg shadow">
         <div class="flex justify-between items-start mb-3">
           <div class="flex items-center gap-2">
-            <div class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
-              <img v-if="user.avatar" :src="getUserAvatarUrl(user.avatar)" class="w-full h-full object-cover">
+            <div class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
+              <img v-if="user.avatar" :src="getUserAvatarUrl(user.avatar)" class="object-cover">
             </div>
             <div class="font-medium text-gray-900">{{ user.username }}</div>
           </div>
@@ -90,7 +90,9 @@
           <SortIcon :sortField="getSortField(field)" />
         </template>
         <template #avatar="{ item }">
-          <img v-if="item.avatar" :src="getUserAvatarUrl(item.avatar)" class="w-10 h-10 object-cover rounded-full">
+          <div class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
+            <img v-if="item.avatar" :src="getUserAvatarUrl(item.avatar)" class="object-cover">
+          </div>
         </template>
         <template #createTime="{ item }">
           {{ dayjs(item.createTime).format("llll") }}