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

<template>
    <view class="hc-image-view" :style="{'background-image': srcs}">
        <image class="image-bar" lazy-load :src="url" @error="imgError" @load="imgLoad"/>
        <view class="bg-gray-1 hc-flex-center h-full radius" v-if="!isImage">
            <view class="p-1 text-gray-4">
                <view class="text-40 text-center">
                    <text class="i-ri-emotion-sad-line"/>
                </view>
                <view class="text-22">加载失败</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, watch} from "vue";
const props = defineProps({
    'src': String
});

//图片Url
const url = ref(props.src);
const srcs = ref('');
const isImage = ref(true)

//监听变化
watch(() => props.src, (src) => {
    url.value = src
})

//图片加载失败
const imgError = () => {
    srcs.value = '';
    isImage.value = false
}
//图片载入完毕
const imgLoad = () => {
    srcs.value = `url(${url.value})`;
    isImage.value = true
}
</script>

<style lang="scss" scoped>
.hc-image-view {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    .image-bar {
        position: absolute;
        width: 0;
        height: 0;
        will-change: transform
    }
}
</style>