图片、视频加载方式

src/components/ShowImg/index.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="showImg">
       <div v-if="showNoImg">暂无</div>
-      <el-image v-else :src="src"  style="width: 100%, height: 100%" @click="checkMedia()" lazy >
+      <el-image v-else :src="src"  @click="checkMedia()" lazy >
         <div slot="placeholder" class="image-slot" :style="{width: width, height: height, lineHeight: height}">
           <i class="el-icon-loading"></i>加载中
         </div>
@@ -28,6 +28,7 @@
 </template>
 <script>
 import Dialog from './components/dialog'
+import { handleVerAutoImg } from '@/utils/index.js'
 export default {
   data() {
     return {
@@ -43,15 +44,12 @@ export default {
   },
   props: ['width', 'height', 'urls'],
   watch: {
-    urls(newval, oldval) {
+    async urls(newval, oldval) {
       this.urls = newval
-      // if (this.type && this.type === 'daichong') {
-      //   this.domain = ''
-      // }
       this.imgsUrl = []
       if (this.urls) { // 判断是否存在
         if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-          this.src = this.domain + this.urls
+          this.src = await handleVerAutoImg(this.domain + this.urls)
           this.showNoImg = false
         } else {
           if (this.urls.length) { // 判断是否为空数组
@@ -60,8 +58,8 @@ export default {
             } else {
               this.showChangeBtn = true
             }
-            this.urls.forEach(item => {
-              this.imgsUrl.push(this.domain + item)
+            this.urls.forEach(async item => {
+              this.imgsUrl.push(await handleVerAutoImg(this.domain + this.urls))
             })
             this.src = this.imgsUrl[0]
             this.showNoImg = false
@@ -75,11 +73,11 @@ export default {
       }
     }
   },
-  mounted() {
+  async mounted() {
     this.imgsUrl = []
     if (this.urls) { // 判断是否存在
       if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-        this.src = this.domain + this.urls
+        this.src = await handleVerAutoImg(this.domain + this.urls)
       } else {
         if (this.urls.length) { // 判断是否为空数组
           if (this.urls.length === 1) { // 判断数组中是否只有一张图片
@@ -87,8 +85,8 @@ export default {
           } else {
             this.showChangeBtn = true
           }
-          this.urls.forEach(item => {
-            this.imgsUrl.push(this.domain + item)
+          this.urls.forEach(async item => {
+            this.imgsUrl.push(await handleVerAutoImg(this.domain + item))
           })
           this.src = this.imgsUrl[0]
         } else {
@@ -118,12 +116,12 @@ export default {
       }
     },
     // 查看媒体
-    checkMedia() {
+    async  checkMedia() {
       if (this.urls) { // 判断是否存在
         if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-          this.$refs.dialog.open(this.domain + this.urls, 'img')
+          this.$refs.dialog.open(await handleVerAutoImg(this.domain + this.urls), 'img')
         } else {
-          this.$refs.dialog.open(this.urls, 'img')
+          this.$refs.dialog.open(this.imgsUrl, 'img')
         }
       }
     }