修改图片显示效果

src/views/backstage/highlights/details.vue

@@ -20,12 +20,20 @@
       </el-table-column>
       <el-table-column label="图片或者视频" >
           <template slot-scope="scope" >
-            <el-popover placement="bottom" trigger="click"  v-if="scope.row.mediaType == 1" > <!--trigger属性值：hover、click、focus 和 manual-->
-              <div>
-                <img v-show="scope.row.url != undefined" :src="scope.row.url" style="width: 320px;height: 200px">
-              </div>
-              <img slot="reference" v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '180px',height: '100px'}" />
-            </el-popover>
+<!--            <el-popover placement="bottom" trigger="click"  v-if="scope.row.mediaType == 1" > &lt;!&ndash;trigger属性值：hover、click、focus 和 manual&ndash;&gt;-->
+<!--              <div>-->
+<!--                <img v-show="scope.row.url != undefined" :src="scope.row.url" style="width: 320px;height: 200px">-->
+<!--              </div>-->
+<!--              <img slot="reference" v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '180px',height: '100px'}" />-->
+<!--            </el-popover>-->
+
+            <el-image
+                    v-if="scope.row.mediaType == 1"
+                    style="width: 100px; height: 100px"
+                    :src="scope.row.url"
+                    :preview-src-list="srcList"
+                    @click="vbs(scope.row.url)">
+            </el-image>
 
             <div style="display: flex" v-if="scope.row.mediaType == 2">
             <video  @click="videoshow(scope.row.url)" slot="reference"  v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '38%',height: '100px'}" />
@@ -94,6 +102,7 @@
     name: "Highlights",
     data() {
       return {
+        srcList: [],
         // 遮罩层
         loading: true,
         // 非单个禁用
@@ -138,6 +147,11 @@
       closevideo(){
         this.isplayvideo=false
       },
+      vbs(val) {
+        this.srcList = []
+        this.srcList.push(val)
+        console.info(this.srcList)
+      },
     }
   };
 </script>

src/views/backstage/problems/details.vue

@@ -19,13 +19,21 @@
         </template>
       </el-table-column>
       <el-table-column label="图片或者视频" >
-          <template slot-scope="scope" >
-            <el-popover placement="bottom" trigger="click"  v-if="scope.row.mediaType == 1" > <!--trigger属性值：hover、click、focus 和 manual-->
-              <div>
-                <img v-show="scope.row.url != undefined" :src="scope.row.url" style="width: 320px;height: 200px">
-              </div>
-              <img slot="reference" v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '180px',height: '100px'}" />
-            </el-popover>
+          <template slot-scope="scope" width="90">
+<!--            <el-popover placement="bottom" trigger="click"  v-if="scope.row.mediaType == 1" > &lt;!&ndash;trigger属性值：hover、click、focus 和 manual&ndash;&gt;-->
+<!--              <div>-->
+<!--                <img v-show="scope.row.url != undefined" :src="scope.row.url" style="width: 320px;height: 200px">-->
+<!--              </div>-->
+<!--              <img slot="reference" v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '180px',height: '100px'}" />-->
+              <el-image
+                      v-if="scope.row.mediaType == 1"
+                      style="width: 100px; height: 100px"
+                      :src="scope.row.url"
+                      :preview-src-list="srcList"
+                      @click="vbs(scope.row.url)">
+              </el-image>
+
+<!--            </el-popover>-->
 
             <div style="display: flex" v-if="scope.row.mediaType == 2">
             <video  @click="videoshow(scope.row.url)" slot="reference"  v-show="scope.row.url != undefined" :src="scope.row.url" :style="{width: '38%',height: '100px'}" />
@@ -94,6 +102,7 @@
     name: "Problems",
     data() {
       return {
+        srcList: [],
         // 遮罩层
         loading: true,
         // 非单个禁用
@@ -138,6 +147,11 @@
       closevideo(){
         this.isplayvideo=false
       },
+      vbs(val) {
+        this.srcList = []
+        this.srcList.push(val)
+        console.info(this.srcList)
+      },
     }
   };
 </script>