生成图片点击放大

src/components/codemirror.vue

@@ -20,8 +20,11 @@
       <p class="text-wrapper">{{ runResult }}</p>
       <div class="pic-wrap" v-if="picSrcList.length">
         <div class="pic-item" v-for="(img, i) in picSrcList" :key="i">
-          <!-- <img class="pic" :src="picSrc" alt=""> -->
+          <el-image 
-          <img class="pic" :src="img" alt="">
+            class="pic"
+            :src="img" 
+            :preview-src-list="picSrcList">
+          </el-image>
           <el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button>
           <a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a>
         </div>
@@ -109,7 +112,6 @@ export default {
       isSubmit: false, // 是否提交了
       runEnable: false, // 是否禁用运行按钮
       tipsVisible: false, // 答案提示弹框显示标识
-      picSrc: '', // 代码运行出来的图片url
       picSrcList: [],
       loadIns: null, // loading实例
       cmOption: {
@@ -308,7 +310,6 @@ export default {
               const result = data.runResult
               this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存
               this.loadIns.close()
-              // this.picSrc = ''
               if (photo) this.picSrcList = photo.split(',')
               this.$emit('update:codeId', res.codeId) // 更新coddeId
               this.$emit('update:answer', result) // 更新运行结果
@@ -324,8 +325,7 @@ export default {
                 this.isError = '' // 对错隐藏
                 const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉
                 this.runResult = text
-                // this.picSrc = photo
+                this.picSrcList = photo.split(',')
-                if (photo) this.picSrcList = photo.split(',')
               } else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) {
                 /**
                  * 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来
@@ -487,13 +487,17 @@ export default {
   right: 0;
   bottom: 5px;
   display: flex;
-  // justify-content: center;
   max-width: calc(100% - 50px);
   margin: 0 auto;
   text-align: center;
   overflow: auto;
   .pic-item {
     margin: 0 5px 5px;
+    &:only-child {
+      .pic {
+        width: 80%;
+      }
+    }
   }
   .pic {
     display: block;