头像中图片加载错误给默认值

src/components/card/UserCard.vue

@@ -10,7 +10,7 @@ import {
   Microphone,
   VideoCamera
 } from '@element-plus/icons-vue'
-import avatar from '@/assets/image/default_avatar.png'
+import default_avatar from '@/assets/image/default_avatar.png'
 import { userStore, messageStore, userCardStore } from '@/stores'
 import { combineId } from '@/js/utils/common'
 import { MsgType } from '@/proto/msg'
@@ -134,6 +134,13 @@ const onVoiceCall = () => {
 const onVideoCall = () => {
   ElMessage.warning('功能开发中')
 }
+
+const showAvatar = ref(userCardData.userInfo.avatarThumb || default_avatar)
+
+const handleAvatarError = () => {
+  console.log('handleAvatarError')
+  showAvatar.value = default_avatar
+}
 </script>
 
 <template>
@@ -152,7 +159,7 @@ const onVideoCall = () => {
         <div class="header">
           <el-icon class="close-button" @click="onClose"><Close /></el-icon>
           <div class="main">
-            <el-avatar class="avatar" :src="userCardData.userInfo.avatarThumb || avatar" />
+            <el-avatar class="avatar" :src="showAvatar" @error="handleAvatarError" />
             <div class="gender">
               <el-icon v-if="userCardData.userInfo.gender === 1" color="#508afe"><Male /></el-icon>
               <el-icon v-if="userCardData.userInfo.gender === 2" color="#ff5722"

src/components/common/GroupAvatarIcon.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import groupChatIcon from '@/assets/svg/groupchat.svg'
 
 /**
  * avatarThumb: 群组头像
  * size：尺寸，不传即显示默认值
+ * isValid: 这个群是否是有效群（离开群组了视为无效）
  */
 const props = defineProps(['avatarThumb', 'size', 'isValid'])
 
@@ -39,15 +40,34 @@ const svgSize = computed(() => {
 const isValid = computed(() => {
   return props.isValid === undefined ? true : props.isValid
 })
+
+const isShowImg = computed(() => {
+  return props.avatarThumb && !isImageError.value
+})
+
+// 标记图片是否加载失败
+const isImageError = ref(false)
+const handleAvatarError = () => {
+  isImageError.value = true
+}
+
+// props.avatarThumb更新触发isImageError重置
+watch(
+  () => props.avatarThumb,
+  () => {
+    isImageError.value = false
+  }
+)
 </script>
 
 <template>
   <div class="group-avatar-box">
     <el-avatar
       class="avatar"
-      v-if="props.avatarThumb"
+      v-if="isShowImg"
       :src="props.avatarThumb"
       :size="avatarSize"
+      @error="handleAvatarError"
     />
     <div v-else class="svg-avatar" :style="{ width: avatarSize + 'px', height: avatarSize + 'px' }">
       <groupChatIcon :style="{ width: svgSize + 'px', height: svgSize + 'px' }"></groupChatIcon>

src/components/common/UserAvatarIcon.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { getAvatarColor, getFontColor } from '@/js/utils/common'
 import { STATUS } from '@/const/userConst'
 import default_avatar from '@/assets/image/default_avatar.png'
@@ -31,7 +31,7 @@ const statusCircleSize = computed(() => {
 })
 
 const isShowImg = computed(() => {
-  return props.showAvatarThumb ? true : false
+  return props.showAvatarThumb && !isImageError.value ? true : false
 })
 
 const firstChar = computed(() => {
@@ -59,11 +59,31 @@ const statusCircleColor = computed(() => {
       return 'gray'
   }
 })
+
+// 标记图片是否加载失败
+const isImageError = ref(false)
+const handleAvatarError = () => {
+  isImageError.value = true
+}
+
+// props.showAvatarThumb更新触发isImageError重置
+watch(
+  () => props.showAvatarThumb,
+  () => {
+    isImageError.value = false
+  }
+)
 </script>
 
 <template>
   <div class="user-avatar-box" :style="{ width: avatarSize + 'px', height: avatarSize + 'px' }">
-    <el-avatar class="avatar" v-if="isShowImg" :src="props.showAvatarThumb" :size="avatarSize" />
+    <el-avatar
+      class="avatar"
+      v-if="isShowImg"
+      :src="props.showAvatarThumb"
+      :size="avatarSize"
+      @error="handleAvatarError"
+    />
     <span
       class="first-char-box"
       v-else-if="firstChar"
@@ -100,7 +120,8 @@ const statusCircleColor = computed(() => {
     justify-content: center;
     align-items: center;
 
-    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0.5) 100%),
+    background:
+      linear-gradient(145deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0.5) 100%),
       v-bind(avatarColor); // 组合渐变色与动态背景色
     position: relative;
     // 调整高光位置

src/views/layout/components/MyCard.vue

@@ -2,7 +2,7 @@
 import { ref, computed, watch } from 'vue'
 import { Close, Male, Female } from '@element-plus/icons-vue'
 import { userStore } from '@/stores'
-import avatar from '@/assets/image/default_avatar.png'
+import default_avatar from '@/assets/image/default_avatar.png'
 import router from '@/router'
 
 const props = defineProps(['isShow'])
@@ -37,6 +37,12 @@ const onClickAvatar = () => {
   router.push('/setting/personal')
 }
 
+const showAvatar = ref(userData.user.avatarThumb)
+
+const handleAvatarError = () => {
+  showAvatar.value = default_avatar
+}
+
 watch(
   () => props.isShow,
   (newValue) => {
@@ -58,7 +64,8 @@ watch(
       <div class="main">
         <el-avatar
           class="avatar"
-          :src="userData.user.avatarThumb || avatar"
+          :src="showAvatar"
+          @error="handleAvatarError"
           @click="onClickAvatar"
         />
         <div class="gender">