Browse Source

1.ai设计结果页,图片加载失败时有提示并且点击可以重新加载

armg 1 day ago
parent
commit
622bc7a752
2 changed files with 33 additions and 5 deletions
  1. BIN
      src/assets/AIDesign/imgErrIcon.jpg
  2. 33 5
      src/views/AIDesign/result.vue

BIN
src/assets/AIDesign/imgErrIcon.jpg


+ 33 - 5
src/views/AIDesign/result.vue

@@ -30,12 +30,12 @@
           </div>
           <div class="imgbox-b">
             <div class="image-wrapper" @click="imgClick(UserFilePathUrl)">
-              <img :src="UserFilePathUrl" alt="房屋效果图" class="house-image" />
-              <div></div>
+              <img :src="UserFilePathUrl" alt="房屋效果图" class="house-image" @error="handleImageError" />
+              <div @click.stop="reloadImage('userFile')"></div>
             </div>
             <div class="image-wrapper" @click="imgClick(imageUrl)">
-              <img :src="imageUrlSmall" alt="房屋效果图" class="house-image" />
-              <div></div>
+              <img :src="imageUrlSmall" alt="房屋效果图" class="house-image" @error="handleImageError" />
+              <div @click.stop="reloadImage('imageSmall')"></div>
             </div>
           </div>
         </div>
@@ -68,7 +68,7 @@
             </div>
           </button>
           <!-- :class="projectDisableFlag == true ? 'save-button-disabled' : ''"  :disabled="projectDisableFlag"-->
-          <button class="action-button-middle flex-center" @click="manualDesign" 
+          <button class="action-button-middle flex-center" @click="manualDesign"
             v-if="showArtificial && StateCode == 2 && !projectDisableFlag">
             <img src="@/assets/AIDesign/bsIcon.png" class="iconbig" />
             <div>
@@ -120,6 +120,8 @@ export default class extends Vue {
   private type = '';
   private wallType = '';
   private F_OutsideType = null;
+  private defaultImg = require('@/assets/AIDesign/imgErrIcon.jpg'); // 替换为实际图片路径
+  private imgHasErr = false;
   // 处理内外墙api
   private GetEntityToApi = {
     outside: GetEntity,
@@ -212,6 +214,32 @@ export default class extends Vue {
     this.projectDisableFlag = true;
     this.showArtificial = false;
     this.allRes = null;
+    this.imgHasErr = false;
+  }
+
+  // 图片加载失败处理(私有方法)
+  private handleImageError(e) {
+    const imgElement = e.target as HTMLImageElement;
+    // 降级显示默认占位图
+    imgElement.src = this.defaultImg;
+    imgElement.onerror = null;
+    this.imgHasErr = true;
+  }
+  private reloadImage(imgType: 'userFile' | 'imageSmall') {
+    let that = this;
+    if (that.allRes && that.imgHasErr) {
+      if (imgType === 'userFile') {
+        if (that.allRes.F_UserFilePath) {
+          that.UserFilePathUrl = that.allRes.BaseUrl + that.allRes.F_UserFilePath;
+        }
+      } else {
+        let high_Definition_img = that.allRes.F_ResultFilePath || that.allRes.F_ResultlargeFilePath || that.allRes.F_ResultSmallFilePath;
+        if (high_Definition_img) {
+          that.imageUrl = that.allRes.BaseUrl + high_Definition_img;
+          that.imageUrlSmall = that.allRes.BaseUrl + that.allRes.F_ResultSmallFilePath;
+        }
+      }
+    }
   }
   getProjectDisableFlag() {
     this.showArtificial = true;