优化加载图片

src/views/realTimeMonitor/components/carouselChart.vue

@@ -22,12 +22,16 @@
         class="bigPic"
         v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
       >
-        <el-image :src="currentPicPath"></el-image>
+        <el-image :src="currentPicPath">
+          <div slot="placeholder" class="image-slot">
+            加载中<span class="dot">...</span>
+          </div>
+        </el-image>
       </div>
       <div class="bigPic" v-else-if="currentPicPath && mediaType == 0">
         <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
         <el-image
-          :src="currentPicPath + '!1366x768'"
+          :src="currentPicPath"
           @load="loadImage"
           @error="setDefaultImage"
           ref="picJpg"
@@ -36,6 +40,15 @@
           height="100%"
           :preview-src-list="srcList"
         >
+          <div
+            slot="placeholder"
+            class="image-slot"
+            :style="{
+              backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
+            }"
+          >
+            <i class="el-icon-loading"></i>
+          </div>
           <template slot="error">
             <img src="../../../assets/img/nodatapic2.jpg" />
           </template>
@@ -733,9 +746,17 @@ export default {
       .el-image {
         width: 100%;
         height: 100%;
-        .el-image__placeholder {
+
-          background: url(../../../assets/img/nopicbg.png) no-repeat center;
+        .image-slot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
           background-size: 100% 100%;
+          i {
+            font-size: 40px;
+            color: #128071;
+          }
         }
         img {
           width: 100%;