EveryLike/pages/component/image/image-format.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <!-- <view class="uni-title">
        <text class="uni-title-text">支持的图片格式示例</text>
      </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.errorImage == null ? item.src : item.errorImage"
            @error="imageErrorEvent(index, $event as ImageErrorEvent)"></image>
        </view>
      </view>
      <!-- <view class="uni-title">
        <text class="uni-title-text">暂不支持的格式</text>
      </view>
      <view v-for="(item,index) in notSupportFormats" :key="index">
        <text class="uni-subtitle-text">{{item.format}}</text>
        <view class="uni-center" style="background:#FFFFFF;">
          <image class="image" mode="widthFix" :src="item.errorImage == null ? item.src : item.errorImage"
            @error="imageErrorEvent(index, $event as ImageErrorEvent)"></image>
        </view>
      </view> -->
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: 'image-format',
        supportFormats: [
          {
            format: 'bmp',
            src: '/static/test-image/logo.bmp'
          },
          {
            format: 'gif',
            src: '/static/test-image/logo.gif'
          },
          {
            format: 'ico',
            src: '/static/test-image/logo.ico'
          },
          {
            format: 'jpg',
            src: '/static/test-image/logo.jpg'
          },
          {
            format: 'png',
            src: '/static/test-image/logo.png'
          },
          {
            format: 'webp',
            src: '/static/test-image/logo.webp'
          },
          {
            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'
          },
          {
            format: 'svg（iOS、Android 暂不支持）',
            src: '/static/test-image/logo.svg'
          }
        ] as Array<ImageFormat>
        /* notSupportFormats: [
          {
            format: 'avif',
            src: '/static/test-image/logo.avif'
          },
          {
            format: 'tif',
            src: '/static/test-image/logo.tif'
          }
        ] as Array<ImageFormat> */
      }
    },
    methods: {
      imageErrorEvent(index : number, e : ImageErrorEvent) {
        console.log("图片加载错误", e.detail);
        // 图片加载失败，加载本地占位图
        this.supportFormats[index].errorImage = '/static/template/drop-card/dislike.png'
      }
    },
  }

  type ImageFormat = {
    format : string
    src : string.ImageURIString
    errorImage ?: string.ImageURIString | null
  }
</script>

<style>
  .image {
    margin: 40px auto;
    width: 100px;
  }
</style>