标准化聊天头像生成、获取与展示

hdApp/src/admin/chat/chatPage.vue

@@ -22,7 +22,7 @@
         <!-- 左侧消息（客户） -->
         <view class="message-left" v-if="!message.isMine">
           <view class="avatar-wrapper">
-            <image class="avatar" :src="message.avatar" mode="aspectFill" />
+            <image class="avatar" :src="formatAvatarUrl(message.avatar)" mode="aspectFill" />
           </view>
 
           <view v-if="message.messageType == 'text' || message.messageType != 'goods'" class="message-content-wrapper">
@@ -127,7 +127,7 @@
             <view class="message-time align-right">{{ message.time }}</view>
           </view>
           <view class="avatar-wrapper">
-            <image class="avatar" :src="message.avatar" mode="aspectFill" />
+            <image class="avatar" :src="formatAvatarUrl(message.avatar)" mode="aspectFill" />
           </view>
         </view>
       </view>
@@ -798,7 +798,7 @@ export default {
           //--------------------------------
           message: messageData.message || messageData || '',
           username: messageData.name || messageData.username || '未知用户',
-          avatar: messageData.avatar || this.$constant.imgUrl + '/retail/default-img.png',
+          avatar: messageData.avatar || '',
           time: this.getCurrentTime(), // 收到消息时间点
           timestamp: messageData.timestamp, // 消息发送时间点
           messageType: messageType
@@ -839,7 +839,7 @@ export default {
       }
 
       const messageContent = this.inputText.trim();
-      const avatar = this.currentUser.avatar || this.$constant.imgUrl + '/retail/default-img.png';
+      const avatar = this.currentUser.avatar || '';
       const timestamp = Math.floor(Date.now() / 1000);
 
       try {
@@ -1052,7 +1052,7 @@ export default {
         });
         return;
       }
-      const avatar = this.currentUser.avatar || this.$constant.imgUrl + '/retail/default-img.png';
+      const avatar = this.currentUser.avatar || '';
       const timestamp = Math.floor(Date.now() / 1000);
 
       // 构建商品信息消息体 -------------------------------- 所看到的消息体 -------------------------------
@@ -1209,6 +1209,31 @@ export default {
     },
     showKeyboard() {
       this.msgInputShow = true;
+    },
+    // 补全头像地址：若不含 http(s):// 则加上 this.$constant.imgUrl + '/'
+    formatAvatarUrl(avatar) {
+      try {
+        const value = avatar || '';
+        if (!value) {
+          return this.$constant.imgUrl + '/retail/default-img.png';
+        }
+        // 已是 http/https 绝对地址
+        if (/^https?:\/\//i.test(value)) {
+          return value;
+        }
+        
+        const base =this.$constant.imgUrl || '';
+        if (!base) {
+          return value;
+        }
+        const normalizedBase = base.replace(/\/+$/, '');
+        if (value.startsWith('/')) {
+          return normalizedBase + value;
+        }
+        return normalizedBase + '/' + value.replace(/^\/+/, '');
+      } catch (e) {
+        return avatar;
+      }
     }
   }
 };

mallApp/src/pages/chat/chatPage.vue

@@ -27,7 +27,7 @@
         <!-- 左侧消息（商家/其他用户） -->
         <view class="message-left" v-if="!message.isMine">
           <view class="avatar-wrapper">
-            <image class="avatar" :src="message.avatar" mode="aspectFill" />
+            <image class="avatar" :src="formatAvatarUrl(message.avatar)" mode="aspectFill" />
           </view>
 
           <view v-if="message.messageType == 'text'|| message.messageType != 'goods'" class="message-content-wrapper">
@@ -111,7 +111,7 @@
             <view class="message-time align-right">{{ message.time }}</view>
           </view>
           <view class="avatar-wrapper">
-            <image class="avatar" :src="message.avatar" mode="aspectFill" />
+            <image class="avatar" :src="formatAvatarUrl(message.avatar)" mode="aspectFill" />
           </view>
         </view>
       </view>
@@ -874,7 +874,7 @@ export default {
           time: this.getCurrentTime(),
           isMine: false, // 既然不是自己的消息，就标记为false
           username: messageData.name || messageData.username || "未知用户",
-          avatar: messageData.avatar || this.$constant.imgUrl + "/retail/default-img.png",
+          avatar: messageData.avatar || "",
           timestamp: messageData.timestamp,
           messageType: messageType,
         };
@@ -914,7 +914,7 @@ export default {
       }
 
       const messageContent = this.inputText.trim();
-      const avatar = this.currentUser.avatar || this.$constant.imgUrl + '/retail/default-img.png';
+      const avatar = this.currentUser.avatar || '';
       const timestamp = Math.floor(Date.now() / 1000);
 
       try {
@@ -1057,7 +1057,7 @@ export default {
         });
         return;
       }
-      const avatar = this.currentUser.avatar || this.$constant.imgUrl + "/retail/default-img.png";
+      const avatar = this.currentUser.avatar || "";
       const timestamp = Math.floor(Date.now() / 1000);
       // 生成一个唯一的字符串，结合时间戳和随机数
       // const randomString = timestamp.toString() + "_" + Math.random().toString(36).substring(2, 10);
@@ -1302,6 +1302,31 @@ export default {
         }
       });
     },
+    // 补全头像地址：若不含 http(s):// 则加上 this.$constant.imgUrl + '/'
+    formatAvatarUrl(avatar) {
+      try {
+        const value = avatar || '';
+        if (!value) {
+          return this.$constant.imgUrl + '/retail/default-img.png';
+        }
+        // 已是 http/https 绝对地址
+        if (/^https?:\/\//i.test(value)) {
+          return value;
+        }
+        
+        const base =this.$constant.imgUrl || '';
+        if (!base) {
+          return value;
+        }
+        const normalizedBase = base.replace(/\/+$/, '');
+        if (value.startsWith('/')) {
+          return normalizedBase + value;
+        }
+        return normalizedBase + '/' + value.replace(/^\/+/, '');
+      } catch (e) {
+        return avatar;
+      }
+    },
   },
 };
 </script>