ieplus-app/src/components/ie-image/ie-image.vue

<template>
  <view class="overflow-hidden" :class="customClass" @click="handleClick"
    :style="{ borderRadius: round + 'px', backgroundColor: loaded ? 'transparent' : bgColor }">
    <image class="w-full h-full block mx-auto" :src="imageSrc" :mode="mode" :lazy-load="lazyLoad"
      :style="{ borderRadius: round + 'px' }" @load="onLoad"></image>
  </view>
</template>
<script lang="ts" setup>
// @ts-ignore
import config from '@/config';
import { useImage} from '@/hooks/useImage';
const { resolvePath } = useImage();
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  isOss: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'widthFix'
  },
  lazyLoad: {
    type: Boolean,
    default: true
  },
  customClass: {
    type: String,
    default: ''
  },
  round: {
    type: Number,
    default: 0
  },
  bgColor: {
    type: String,
    default: ''
  }
});
const imageSrc = computed(() => {
  return props.src ? (props.isOss ? config.ossUrl + props.src : resolvePath(props.src)) : '';
});
const emit = defineEmits(['click']);
const handleClick = (e: any) => {
  emit('click', e);
}

const loaded = ref(false);
const onLoad = () => {
  loaded.value = true;
}
</script>