修改展览和布展的头图为先加载低清后高清

src/utils/index.js

@@ -73,7 +73,6 @@ export function addSeparator(num){
  */
 export function formatNum(num) {
 	num = Number(num);
-  console.log(num);
 	if (num == 0) {
 		return num + '';
 	} else

src/views/culturalRelic/Detail.vue

@@ -5,20 +5,20 @@
       class="
         content-item
         display-detail_imgs
-        wow
+        
         animate__animated animate__fadeInDownBig
       "
       ref="imgs"
-      v-if="CRDetail.faceImagePressUrl"
+      v-if="CRDetail.faceImageUrl ||  displayDetail.imagesVo.length > 0"
     >
-      <el-image
+      <img
+        id="faceImage"
         :src="
           $getFullUrl(
             CRDetail.faceImagePressUrl || CRDetail.imagesVo[0].pressUrl
           )
         "
-        fit="cover"
-      ></el-image>
+      />
     </div>
     <div class="wrapper wow animate__animated animate__fadeInUpBig">
       <div class="inner">
@@ -347,6 +347,7 @@ export default {
           // 获取关联文物
           // this.loadCrRecommend();
           this.$nextTick(() => {
+            this.replaceFaceImage();
             if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
               this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
               this.$refs.AudioPlayer.play();
@@ -394,6 +395,22 @@ export default {
       this.relateRelics = res.data.records;
       console.log("res", res);
     },
+
+    replaceFaceImage() {
+      var img = new Image(); //新建一个图片对象
+      let url; //最终显示的大图
+      // debugger
+      if (this.CRDetail.faceImagePressUrl) {
+        url = this.$getFullUrl(this.CRDetail.faceImageUrl);
+      } else if (this.CRDetail.imagesVo.length > 0) {
+        url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
+      }
+      let faceImage = document.getElementById("faceImage");
+      img.src = url;
+      img.onload = function () {
+        faceImage.src = url;
+      };
+    },
     handleBack() {
       this.$router.go(-1);
     },
@@ -409,13 +426,9 @@ export default {
     handelPreviewImages(items, hasImages) {
       this.imgViewerVisible = true;
       if (hasImages) {
-        this.imgList = items.map((item) =>
-          this.$getFullUrl(item.url)
-        );
+        this.imgList = items.map((item) => this.$getFullUrl(item.url));
       } else {
-        this.imgList = items.map((item) =>
-          this.$getFullUrl(item)
-        );
+        this.imgList = items.map((item) => this.$getFullUrl(item));
       }
     },
     handleToDetail(crId) {
@@ -594,9 +607,10 @@ $blue: #2069c4;
   /**轮播图 */
   .display-detail_imgs {
     height: 436px;
-    .el-image {
+    img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
   }
   .wrapper {

src/views/display/components/BlueStyle.vue

@@ -5,16 +5,20 @@
       class="
         content-item
         display-detail_imgs
-        wow
         animate__animated animate__fadeInDownBig
       "
       ref="imgs"
       v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
     >
-      <el-image
-        :src="$getFullUrl(displayDetail.faceImageUrl)"
-        fit="cover"
-      ></el-image>
+      <img
+        id="faceImage"
+        :src="
+          $getFullUrl(
+            displayDetail.faceImagePressUrl ||
+              displayDetail.imagesVo[0].pressUrl
+          )
+        "
+      />
     </div>
     <div class="wrapper wow animate__animated animate__fadeInUpBig">
       <div class="inner">
@@ -491,6 +495,7 @@ export default {
         }
       }
       this.$nextTick(() => {
+        this.replaceFaceImage();
         if (
           this.displayDetail.audiosVo &&
           this.displayDetail.audiosVo.length > 0
@@ -501,6 +506,20 @@ export default {
       });
     },
 
+    replaceFaceImage() {
+      var img = new Image(); //新建一个图片对象
+      let url; //最终显示的大图
+      if (this.displayDetail.faceImagePressUrl) {
+        url = this.$getFullUrl(this.displayDetail.faceImageUrl);
+      } else if (this.displayDetail.imagesVo.length > 0) {
+        url = this.$getFullUrl(this.displayDetail.imagesVo[0].url);
+      }
+      let faceImage = document.getElementById("faceImage");
+      img.src = url;
+      img.onload = function () {
+        faceImage.src = url;
+      };
+    },
     //节流函数
     throttle(fn, gapTime) {
       let _this = this;
@@ -687,9 +706,10 @@ $blue: #2069c4;
   /**轮播图 */
   .display-detail_imgs {
     height: 436px;
-    .el-image {
+    img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
   }
   .wrapper {