<template>
  <scroll-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.src" @error="imageErrorEvent"></image>
        </view>
      </view>
      <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" @error="imageErrorEvent"></image>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import logo from './logo.png';
  export default {
    data() {
      return {
        title: 'image-path',
        data: [
          {
            src: '/static/test-image/logo.png',
            description: '本地路径：/static方式'
          },
          {
            src: '../../../static/test-image/logo.png',
            description: '本地路径：../static/'
          },
          {
            src: '../../../static/Test-Image/Logo.png',
            description: '本地相对路径忽略大小写（需注意Android打包后无效）'
          },
          {
            src: logo,
            description: 'import方式'
          },
          {
            // #ifdef APP-ANDROID
            src: 'file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__3584C99/www/static/test-image/logo.png',
            // #endif
            // TODO iOS发版时还需再补路径
            description: '本地绝对路径file://方式（需注意打包后包名appid匹配）'
          },
          {
            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(e : ImageErrorEvent) {
        console.log("图片加载错误", e.detail);
        // 图片加载失败，加载本地占位图
        e.target?.setAttribute('src', '/static/template/drop-card/dislike.png')
      }
    },
  }

  type ImagePath = {
    src : string
    description : string
  }
</script>

<style>
  .image {
    margin: 40rpx auto;
    width: 200rpx;
  }
</style>
