From d73765eb2afddd3e5ae35a79d9c9b979740ec7dc Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Wed, 27 Dec 2023 05:09:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=A0=BC=E5=BC=8F=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E5=85=BC=E5=AE=B9web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/image/image-format.uvue | 36 ++++++++++++++++---------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/pages/component/image/image-format.uvue b/pages/component/image/image-format.uvue
index d47894ad..e824cf31 100644
--- a/pages/component/image/image-format.uvue
+++ b/pages/component/image/image-format.uvue
@@ -2,16 +2,18 @@
   <scroll-view>
     <page-head :title="title"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
-      <view class="uni-title">
+      <!-- <view class="uni-title">
         <text class="uni-title-text">支持的图片格式示例</text>
-      </view>
+      </view> -->
       <view v-for="(item,index) in supportFormats" :key="index">
         <text class="uni-subtitle-text">{{item.format}}</text>
         <view class="uni-center" style="background:#FFFFFF;">
-          <image class="image" mode="widthFix" :src="item.src"></image>
+          <!-- <image class="image" mode="widthFix" :src="item.src"></image> -->
+          <image class="image" mode="widthFix" :src="item.errorImage == null ? item.src : item.errorImage"
+            @error="imageErrorEvent(index, $event as ImageErrorEvent)"></image>
         </view>
       </view>
-      <view class="uni-title">
+      <!-- <view class="uni-title">
         <text class="uni-title-text">暂不支持的格式</text>
       </view>
       <view v-for="(item,index) in notSupportFormats" :key="index">
@@ -20,7 +22,7 @@
           <image class="image" mode="widthFix" :src="item.errorImage == null ? item.src : item.errorImage"
             @error="imageErrorEvent(index, $event as ImageErrorEvent)"></image>
         </view>
-      </view>
+      </view> -->
     </view>
   </scroll-view>
 </template>
@@ -56,11 +58,19 @@
             src: '/static/test-image/logo.webp'
           },
           {
-            format: 'heic（Android10+支持）',
+            format: 'heic（App-Android10+支持）',
             src: '/static/test-image/logo.heic'
+          },
+          {
+            format: 'avif（仅部分浏览器支持）',
+            src: '/static/test-image/logo.avif'
+          },
+          {
+            format: 'tif（仅部分浏览器支持）',
+            src: '/static/test-image/logo.tif'
           }
-        ] as Array<ImageFormat>,
-        notSupportFormats: [
+        ] as Array<ImageFormat>
+        /* notSupportFormats: [
           {
             format: 'avif',
             src: '/static/test-image/logo.avif'
@@ -69,14 +79,14 @@
             format: 'tif',
             src: '/static/test-image/logo.tif'
           }
-        ] as Array<ImageFormat>
+        ] as Array<ImageFormat> */
       }
     },
     methods: {
       imageErrorEvent(index: number, e: ImageErrorEvent) {
-        console.log("图片加载错误", e.detail); //TODO tif打不出正确的错误日志
+        console.log("图片加载错误", e.detail);
         // 图片加载失败，加载本地占位图
-        this.notSupportFormats[index].errorImage = '/static/template/drop-card/dislike.png'
+        this.supportFormats[index].errorImage = '/static/template/drop-card/dislike.png'
       }
     },
   }
@@ -90,7 +100,7 @@
 
 <style>
   .image {
-    margin: 40rpx auto;
-    width: 200rpx;
+    margin: 40px auto;
+    width: 100px;
   }
 </style>
-- 
GitLab