图片格式示例兼容web

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>