client-app/components/hc-img/index.vue

<template>
    <view class="hc-img-view"
        :style="{
            'background-image': srcs,
            'width': widths,
            'height': heights,
            'aspect-ratio': aspectRatio
        }"></view>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
const props = defineProps({
    'src': String,
    'width': [String, Number],
    'height': [String, Number]
});
//初始变量
const srcs = ref('');
const widths = ref('');
const heights = ref('');
const aspectRatio = ref('');

//加载完成
onMounted(() => {
    setStyleData(props.src, props.width, props.height);
});

//监听变化
watch(() => [
    props.src,
    props.width,
    props.height
], ([src, width, height]) => {
    setStyleData(src, width, height);
})

//设置样式
const setStyleData = (src, width, height) => {
    srcs.value = 'url(' + src + ')';
    widths.value = (width * 2) + 'rpx';
    heights.value = (height * 2) + 'rpx';
    aspectRatio.value = 'auto ' + width + ' / ' + height;
}
</script>

<style lang="scss" scoped>
.hc-img-view {
    background-position: 0% 0%;
    background-size: 100% 100%;
    display: inline-block;
}
</style>