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

components/avatar.vue

 <template>
 <template>
     <el-avatar
     <el-avatar
         class="tm-avatar"
         class="tm-avatar"
-        :src="hasAvatar ? src : ''"
+        :src="hasAvatar ? decodeSrc : ''"
         :size="size"
         :size="size"
         :shape="shape"
         :shape="shape"
         :alt="alt"
         :alt="alt"
@@ -20,10 +20,10 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <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 {
+    @Component
+    export default class Avatar extends Vue {
         @Prop()
         @Prop()
         private readonly src?: string;
         private readonly src?: string;
 
 
@@ -56,26 +56,33 @@ export default class Avatar extends Vue {
         private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
         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>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-.tm-avatar {
+    .tm-avatar {
         background: none;
         background: none;
         flex-shrink: 0;
         flex-shrink: 0;
         flex-grow: 0;
         flex-grow: 0;
-}
-.tm-avatar .tm-svg-icon {
+    }
+    .tm-avatar .tm-svg-icon {
         background: #d8d8d8;
         background: #d8d8d8;
-}
-.tm-avatar .tm-load-img {
+    }
+    .tm-avatar .tm-load-img {
         display: none;
         display: none;
-}
-.tm-avatar /deep/img {
+    }
+    .tm-avatar /deep/img {
         width: 100%;
         width: 100%;
-}
-.default-avatar {
+    }
+    .default-avatar {
         display: inline-block;
         display: inline-block;
         color: #333;
         color: #333;
-}
+    }
 </style>
 </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) {
     if (url) {
         const sdk = Chat.getSdk();
         const sdk = Chat.getSdk();
         const s = sdk.mediaController.buildThumbnail;
         const s = sdk.mediaController.buildThumbnail;
         if (fsImg.test(url)) {
         if (fsImg.test(url)) {
             const m = fsImg.exec(url);
             const m = fsImg.exec(url);
             if (m && m.length) {
             if (m && m.length) {
-                return sdk.global.baseUrl + s(m[0], 300);
+                return sdk.global.baseUrl + s(m[0], w);
             }
             }
         }
         }
         return url;
         return url;

components/image-preview.vue

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

utils/user-info.ts

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