<script setup lang="ts" name="MyAvatar">
import { ref, reactive, computed, onMounted } from 'vue'
// import type { ImageFit, ImagePosition, ImageProps } from 'vant'
// import HeadMale from '/image/head-male.png'
// import HeadFemale from '@/static/image/head-female.png'
import HeadMale from '@/static/image/head-male.png'
import HeadFemale from '@/static/image/head-female.png'

const props = withDefaults(defineProps<{
  src: string | undefined
  round?: boolean
  fit?: string
  block?: boolean
  sex?: string
}>(), {
  round: true,
  fit: 'cover',
  block: true,
  sex: '0'
})
</script>

<template>
  <img v-if="props.src" :src="props.src" alt="">
  <img :src="props.sex === '1' ? HeadFemale : HeadMale" class="my-head-error">
  <!-- <van-image
    class="my-head"
    width="100%"
    height="100%"
    :fit="props.fit"
    :block="props.block"
    :round="props.round"
    :src="props.src" use-loading-slot use-error-slot>
    <template>
      <img :src="props.sex === '1' ? HeadFemale : HeadMale" class="my-head-error">
    </template>
    <template #error>
      <img :src="props.sex === '1' ? HeadFemale : HeadMale" class="my-head-error">
    </template>
  </van-image> -->
</template>

<style lang="less" scoped>
.my-head {
    width: 118rpx;
    height: 118rpx;
  &-error {
    display: block;
    width: 118rpx;
    height: 118rpx;
  }
}
</style>
