<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <view>
      <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 data" :key="index">
          <text class="uni-subtitle-text">{{item.description}}</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>
        <test-image-path />
        <view>
          <text class="uni-subtitle-text">非static目录的src静态路径：./logo.png</text>
          <view class="uni-center" style="background:#FFFFFF;">
            <image class="image" mode="widthFix" src="./logo.png"></image>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  import logo from './logo.png';
  const appid = uni.getAppBaseInfo().appId;
  export default {
    data() {
      return {
        title: 'image-path',
        outsideStaticPath: './logo.png' as string.ImageURIString,
        outsideStaticErrorPath: null as string | null,
        data: [
          {
            src: '/static/test-image/logo.png',
            description: '本地路径：/static方式'
          },
          {
            src: '../../../static/test-image/logo.png',
            description: '本地路径：../static/'
          },
          {
            src: '../../../static/Test-Image/Logo.png',
            description: '本地相对路径忽略大小写（需注意iOS平台不支持，Android平台云端打包后无效）'
          },
          {
            src: logo,
            description: 'import方式'
          },
          {
            src: `file:///android_asset/apps/${appid}/www/static/test-image/logo.png`,
            description: '本地绝对路径file://方式（仅限Android平台，云端打包后生效）'
          },
          {
            src: 'testerror.jpg',
            description: '错误的本地路径'
          },
          {
            src: 'data:image/*;base64,[encoded data, 5720 characters]',
            description: 'Base64'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/image/png',
            description: '正确网络路径'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/gif',
            description: '错误网络格式，假gif实为jpeg'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/jpeg',
            description: '错误网络格式，假jpg实为png'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/png',
            description: '错误网络格式，假png实为gif'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/404',
            description: '错误网络地址404接口'
          },
          {
            src: 'https://request.dcloud.net.cn/api/http/contentType/404.png',
            description: '错误网络地址，不存在的图片'
          },
          {
            src: './logo.png',
            description: '非static目录的动态路径（不显示是对的）'
          }
        ] as Array<ImagePath>
      }
    },
    methods: {
      imageErrorEvent(index : number, e : ImageErrorEvent) {
        console.log("图片加载错误", e.detail);
        // 图片加载失败，加载本地占位图
        this.data[index].errorImage = '/static/template/drop-card/dislike.png'
      }
    },
  }

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

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