修改bug

src/components/ShowImg/index.vue

@@ -8,15 +8,18 @@
 
 <template>
   <div class="img-wrap">
-    <div v-if="showChangeBtn" class="changeLeft" @click="changeLeft">
+    <div v-if='showChangeBtn' class="changeLeft" @click="changeLeft">
       <i class="el-icon-arrow-left"></i>
     </div>
     <div class="showImg">
       <div v-if="showNoImg">暂无</div>
-      <el-image v-else-if="currentSrc" :src="currentSrc" :preview-src-list="imgsUrl"></el-image>
+      <el-image v-else :src="src" @click="checkMedia()">
-      <div v-else class="image-slot" :style="{ width: width, height: height, lineHeight: height }"><i class="el-icon-loading"></i>加载中</div>
+        <div slot="placeholder" class="image-slot" :style="{ width: width, height: height, lineHeight: height }">
+          <i class="el-icon-loading"></i>加载中
+        </div>
+      </el-image>
     </div>
-    <div v-if="showChangeBtn" class="changeRight" @click="changeRight">
+    <div v-if='showChangeBtn' class="changeRight" @click="changeRight">
       <i class="el-icon-arrow-right"></i>
     </div>
     <!--封面图、视频弹窗组件-->
@@ -30,43 +33,30 @@ export default {
   data() {
     return {
       showNoImg: false,
-      src: undefined,
+      src: '',
       showChangeBtn: false,
       domain: this.$store.getters.getSystemConfig.webImgReq, // 存放图片的域名
       imgsUrl: []
     }
   },
-  computed: {
-    currentSrc() {
-      const src = this.src || this.imgsUrl[0]
-      return src
-    }
-  },
   components: {
     Dialog
   },
-  props: ['width', 'height', 'urls'],
+  props: ['width', 'height', 'urls', 'noNeedDoamin'],
   watch: {
     urls: {
-      async handler() {
+      handler(o, n) {
-        this.imgsUrl = []
+        this.getBlobUri()
-        const urls = []
-        if (typeof this.urls === 'string') {
-          this.urls && urls.push(this.urls)
-        } else if (Array.isArray(this.urls)) {
-          urls.push(...this.urls)
-        }
-        this.showChangeBtn = urls.length > 1
-        this.showNoImg = urls.length < 1
-        urls.forEach(async(item, i) => {
-          this.imgsUrl.push(await handleVerAutoImg(this.domain + item))
-          if (i < 1) this.src = this.imgsUrl[0]
-        })
       },
       immediate: true
     }
   },
+
   methods: {
+    // 判断是否为完整的HTTP链接
+    isFullUrl(url) {
+      return url && (url.startsWith('http://') || url.startsWith('https://'))
+    },
     changeLeft() {
       const index = this.imgsUrl.indexOf(this.src)
       if (index === 0) {
@@ -83,9 +73,59 @@ export default {
         this.src = this.imgsUrl[index + 1]
       }
     },
+    async getBlobUri() {
+      if (!this.urls) {
+        this.showChangeBtn = false
+        this.showNoImg = true
+        return
+      }
+
+      // 检查是否为数组
+      if (Array.isArray(this.urls)) {
+        if (this.urls.length) {
+          this.showChangeBtn = true
+          for (let index = 0; index < this.urls.length; index++) {
+            if (!this.noNeedDoamin && !this.isFullUrl(this.urls[index])) {
+              await handleVerAutoImg(this.domain + this.urls[index]).then(res => {
+                this.imgsUrl[index] = res
+                this.src = this.imgsUrl[0]
+                this.showNoImg = false
+              })
+            } else {
+              this.imgsUrl = this.urls
+              this.src = this.imgsUrl[0]
+              this.showNoImg = false
+            }
+
+          }
+        } else {
+          this.showChangeBtn = false
+          this.showNoImg = true
+        }
+      } else {
+        try {
+          const imageUrl = this.noNeedDoamin || this.isFullUrl(this.urls) ? this.urls : `${this.domain}${this.urls}`
+          const baseUri = await handleVerAutoImg(imageUrl)
+          if (baseUri && baseUri.length) {
+            this.src = baseUri
+            this.showNoImg = false
+          } else {
+            this.showNoImg = true
+          }
+        } catch (e) {
+          console.error('Error loading image:', e)
+        }
+      }
+    },
     // 查看媒体
     async checkMedia() {
-      this.$refs.dialog.open(this.imgsUrl, 'img')
+      if (this.urls) { // 判断是否存在
+        if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
+          this.$refs.dialog.open(this.src)
+        } else {
+          this.$refs.dialog.open(this.imgsUrl, 'img')
+        }
+      }
     }
   }
 }
@@ -105,17 +145,21 @@ export default {
     margin-top: 15%;
     cursor: pointer;
   }
+
   .showImg {
     width: 100%;
     height: 100%;
+
     .image-slot {
       background: #f5f7fa;
       font-size: 12px;
       color: #c0c4cc;
     }
+
     .el-image__error {
       font-size: 12px;
     }
+
     .el-image {
       width: 100%;
       height: 100%;