添加显示UI

src/components/EditPanel.vue

@@ -30,14 +30,16 @@
 
     </div>
     <div v-show="panelTabState === 0">
-    
+
       <div v-show="panelState === 11||panelState===15">
 
         <div
           style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
           v-show="panelState == 15">
           <div>
-            <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" alt="">
+            <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
           </div>
           <div style="display:flex; flex-direction: column;margin-left: 16px;">
             <span style="font-size:14px;
@@ -50,7 +52,7 @@
             color:rgba(100,107,129,1);
             margin-bottom: 16px;
             line-height:19px;">
-              3iiiiiii.jpg
+              {{element.imgSrc|currentImageName}}
             </span>
             <div style="width:108px;
             height:28px;
@@ -283,8 +285,9 @@
 
           <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 12">
             <div>
-              <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png"
-                alt="">
+              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
             </div>
             <div style="display:flex; flex-direction: column;margin-left: 16px;">
               <span style="font-size:14px;
@@ -297,7 +300,7 @@
               color:rgba(100,107,129,1);
               margin-bottom: 16px;
               line-height:19px;">
-                3iiiiiii.jpg
+                {{element.imgSrc|currentImageName}}
               </span>
               <div style="width:108px;
               height:28px;
@@ -310,7 +313,7 @@
               line-height:28px;">替换元素</div>
             </div>
           </div>
-        
+
           <div style="display: inline-flex;" v-show="panelState != 14 && panelState != 16 && panelState != 12">
             <el-checkbox v-model="element.elabEditable">可编辑</el-checkbox>
           </div>
@@ -1031,6 +1034,12 @@
       elements() {
         return this.$store.state.editor.editorPage.elements
       },
+    },
+    filters: {
+      currentImageName(imageName) {
+        console.log(imageName);
+        return imageName.split("-").pop()
+      }
     }
   }