图片、视频加载方式

src/components/UploadImgArr/index.vue

@@ -9,11 +9,11 @@
   <div>
     <draggable v-model="locaImg" class="list-group" tag="ul" v-bind="dragOptions" @start="drag = true" @end="drag = false">
       <div v-for="(img,index) in locaImg" :key="index" class="image-list" style="float: left;">
-        <img class="el-upload-list__item-thumbnail image-detail" :src="domain+img" alt="">
+        <img class="el-upload-list__item-thumbnail image-detail" :src="imgSrc[index]" alt="">
         <!-- 遮罩层 -->
         <a href="#">
           <div class="image-mask">
-            <span class="add" @click="handlePictureCardPreview(domain+img)">
+            <span class="add" @click="handlePictureCardPreview(imgSrc[index])">
               <i class="el-icon-view"></i>
             </span>
             <span class="delete" @click="removeImage(index)">
@@ -33,6 +33,7 @@
 </template>
 <script>
 import draggable from 'vuedraggable'
+import { handleVerAutoImg } from '@/utils/index.js'
 export default {
   components: { draggable },
   data() {
@@ -46,7 +47,8 @@ export default {
         // { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
       ],
       drag: false, // 拖拽效果是否开启
-      locaImg: []
+      locaImg: [],
+      imgSrc: []
     }
   },
   props: {
@@ -57,6 +59,7 @@ export default {
       }
     }
   },
+
   computed: {
     dragOptions() {
       return {
@@ -66,6 +69,7 @@ export default {
         ghostClass: 'ghost'
       }
     }
+
   },
   watch: {
     // 监听拖动事件改变时，传出新的图片数组
@@ -80,15 +84,23 @@ export default {
     }
   },
 
-  mounted() {
+  async mounted() {
     this.locaImg = []
     if (this.img) {
       this.img.filter((item) => {
         this.locaImg.push(item)
       })
     }
+    // 在组件挂载时加载图像 URL
+    this.imgSrc = await Promise.all(this.locaImg.map(img => this.changeImg(img)))
   },
   methods: {
+    async changeImg(img) {
+      // 这里应该替换为真实的异步代码
+      const a = await handleVerAutoImg(this.domain + img)
+      return a
+    },
+
     handleChange(file, fileList) {
       if (file.status === 'success') {
         this.locaImg.push(file.response.data.path)