图片预览

src/views/tcZz/netManage/qlzxxddt/index.vue

@@ -289,7 +289,18 @@
 
         <el-descriptions-item label="内容"><div v-html='form.content'></div></el-descriptions-item>
 
-        <el-descriptions-item label="图片路径(完整路径)"><div class="images-box"><img v-for="(url,index) in images" :key="index" :src="url"></img></div></el-descriptions-item>
+        <!-- <el-descriptions-item label="图片路径(完整路径)"><div class="images-box"><img v-for="(url,index) in images" :key="index" :src="url"></img></div></el-descriptions-item> -->
+        <el-descriptions-item label="图片">
+          <div class="images-box">
+            <el-image 
+              v-for="(url,index) in images"
+              :key="index"
+              style="width: 150px"
+              :src="url" 
+              :preview-src-list="srcList">
+            </el-image>
+          </div>
+        </el-descriptions-item>
 
         <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
 
@@ -396,6 +407,7 @@
         fileList:[],
         images:[],
         imageUrls:'',
+        srcList:[],
       };
     },
     created() {
@@ -507,10 +519,12 @@
       handleInfo(row){
         this.reset();
         this.images = [];
+        this.srcList = [];
         const id = row.id || this.ids
         getQlzxxddt(id).then(response => {
           this.form = response.data;
           this.images = this.form.imageUrl.split(',');
+          this.srcList = this.form.imageUrl.split(',');
           this.infoOpen = true;
           this.infoTitle = "查看清朗专项行动动态详情"
         });
@@ -695,7 +709,7 @@
       flex-wrap: wrap;
       width: 100%;
       img {
-        width: 150px;
+        // width: 150px;
         margin: 5px;
       }
     }