EveryLike/pages/component/image/image.uvue

<template>
  <view style="flex: 1;">
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-center" style="background:#FFFFFF;">
        <image class="image" :fade-show="true" mode="widthFix" :src="imageSrc" @error="error" @load="load"></image>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @tap="imageFormat">图片格式示例</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @tap="imageMode">图片缩放模式示例</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @tap="imagePath">图片路径示例</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @tap="imageLarge">大图示例</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @tap="imageLong">长图示例</button>
      </view>
    </view>
    <view v-if="autoTest">
      <image :src="setCookieImage"></image>
      <image :src="verifyCookieImage" @error="error"></image>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'image',
        imageSrc: "/static/test-image/logo.png" as string.ImageURIString,
        loadError: false,
        // 自动化测试
        autoTest: false,
        setCookieImage: "",
        verifyCookieImage: "",
        eventLoad: null as UTSJSONObject | null,
        eventError: null as UTSJSONObject | null
      }
    },
    methods: {
      error(event : ImageErrorEvent) {
        this.loadError = true
        console.log(event.type, event.detail);
        if (this.autoTest) {
          this.eventError = {
            "tagName": event.target?.tagName,
            "type": event.type,
            // "errMsg": event.detail.errMsg
          };
        }
      },
      load(event : ImageLoadEvent) {
        console.log(event.type, event.detail);
        if (this.autoTest) {
          this.eventLoad = {
            "tagName": event.target?.tagName,
            "type": event.type,
            "width": event.detail.width,
            "height": event.detail.height
          };
        }
      },
      imageFormat() {
        uni.navigateTo({
          url: '/pages/component/image/image-format'
        });
      },
      imageMode() {
        uni.navigateTo({
          url: '/pages/component/image/image-mode'
        });
      },
      imagePath() {
        uni.navigateTo({
          url: '/pages/component/image/image-path'
        });
      },
      imageLarge() {
        uni.navigateTo({
          url: '/pages/component/image/image-large'
        });
      },
      imageLong() {
        uni.navigateTo({
          url: '/pages/component/image/image-long'
        });
      }
    }
  }
</script>
<style>
  .image {
    margin: 20px auto;
    width: 100px;
  }
</style>