修正图片预览问题，客户端和后台api域名不一致导致

components/avatar.vue

 <template>
     <el-avatar
         class="tm-avatar"
-        :src="hasAvatar ? src : ''"
+        :src="hasAvatar ? decodeSrc : ''"
         :size="size"
         :shape="shape"
         :alt="alt"
@@ -20,62 +20,69 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
-@Component
-export default class Avatar extends Vue {
-    @Prop()
-    private readonly src?: string;
+    @Component
+    export default class Avatar extends Vue {
+        @Prop()
+        private readonly src?: string;
 
-    @Prop({
-        type: [String, Number],
-        default: 30,
-        validator: (value) =>
-            ["large", "medium", "small"].indexOf(value) >= 0 ||
-            typeof value === "number",
-    })
-    private readonly size!: number | "large" | "medium" | "small";
+        @Prop({
+            type: [String, Number],
+            default: 30,
+            validator: (value) =>
+                ["large", "medium", "small"].indexOf(value) >= 0 ||
+                typeof value === "number",
+        })
+        private readonly size!: number | "large" | "medium" | "small";
 
-    @Prop({
-        type: String,
-        default: "square",
-        validator: (value) => ["circle", "square"].indexOf(value) >= 0,
-    })
-    private readonly shape!: "circle" | "square";
+        @Prop({
+            type: String,
+            default: "square",
+            validator: (value) => ["circle", "square"].indexOf(value) >= 0,
+        })
+        private readonly shape!: "circle" | "square";
 
-    @Prop(String)
-    private readonly alt?: string;
+        @Prop(String)
+        private readonly alt?: string;
 
-    @Prop({
-        type: String,
-        default: "cover",
-        validator: (value) =>
-            ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >=
-            0,
-    })
-    private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
+        @Prop({
+            type: String,
+            default: "cover",
+            validator: (value) =>
+                ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >=
+                0,
+        })
+        private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
 
-    private hasAvatar = false;
-}
+        private hasAvatar = false;
+
+        private get decodeSrc() {
+            if (this.src) {
+                return decodeURIComponent(this.src);
+            }
+            return this.src;
+        }
+    }
 </script>
 
 <style lang="less" scoped>
-.tm-avatar {
-    background: none;
-    flex-shrink: 0;
-    flex-grow: 0;
-}
-.tm-avatar .tm-svg-icon {
-    background: #d8d8d8;
-}
-.tm-avatar .tm-load-img {
-    display: none;
-}
-.tm-avatar /deep/img {
-    width: 100%;
-}
-.default-avatar {
-    display: inline-block;
-    color: #333;
-}
+    .tm-avatar {
+        background: none;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+    .tm-avatar .tm-svg-icon {
+        background: #d8d8d8;
+    }
+    .tm-avatar .tm-load-img {
+        display: none;
+    }
+    .tm-avatar /deep/img {
+        width: 100%;
+    }
+    .default-avatar {
+        display: inline-block;
+        color: #333;
+    }
 </style>

components/controller/index.ts

@@ -51,14 +51,14 @@ export function parserMessage(type: MessageType, rawMsg: string) {
     }
 }
 
-export function rebuildImage(url: string) {
+export function rebuildImage(url: string, w = 300) {
     if (url) {
         const sdk = Chat.getSdk();
         const s = sdk.mediaController.buildThumbnail;
         if (fsImg.test(url)) {
             const m = fsImg.exec(url);
             if (m && m.length) {
-                return sdk.global.baseUrl + s(m[0], 300);
+                return sdk.global.baseUrl + s(m[0], w);
             }
         }
         return url;

components/image-preview.vue

@@ -10,12 +10,12 @@
     >
         <div class="d-flex flex-column" v-if="value">
             <div class="d-flex justify-content-center align-items-start">
-                <img v-if="file" :src="file.url" :style="imgStyle" />
+                <img v-if="file" :src="img" :style="imgStyle" />
                 <i class="el-icon-close" @click="close"></i>
 
                 <a
                     class="d-flex align-items-center justify-content-center"
-                    :href="file.url"
+                    :href="img"
                     :download="getAttachment"
                     target="_blank"
                 >
@@ -28,15 +28,23 @@
 
 <script lang="ts">
     import { Component, Model, Prop, Vue } from "vue-property-decorator";
+    import { rebuildImage } from "./controller";
 
     @Component({ components: {} })
     export default class ImagePreview extends Vue {
         @Model("update")
-        private value!: boolean;
+        private readonly value!: boolean;
 
         @Prop()
         private file!: { name: string; url: string };
 
+        private get img() {
+            if (this.file && this.file.url) {
+                return rebuildImage(this.file.url, 10000);
+            }
+            return "";
+        }
+
         private get imgStyle() {
             return {
                 "max-width": `${document.body.scrollWidth * 0.8}px`,

utils/user-info.ts

@@ -58,7 +58,8 @@ export class ChatUserInfoService {
         const data = {
             name: info.realname || info.username || info.mobile || info.mobile,
             phone: info.mobile,
-            icon: info.avatar_url,
+            icon:
+                (info.avatar_url && decodeURIComponent(info.avatar_url)) || "",
             alias_name: info.alias_name,
         };
         userMapping[eid] = data;