uniapp 实现图片加载组件默认占位

<template>
<view class="load-image" :style="{width: width + 'rpx', height: height + 'rpx' }">
    <image class="load-image-show" :style="{borderRadius: borderRadius + 'rpx'}"
         :class="{load: imgLoaded}" 
         :src="imgLoaded ? loadImage : $img('images/imagefail.png', { from: 'local' })"
         mode="aspectFill" 
         @load="imgLoaded = true" />
</view>
</template>

<script>
export default {
    name: "loadimage",
    props: {
        loadImage: String,
        width: [Number,String],
        height: [Number,String],
        borderRadius: {
            type: [Number,String],
            default : 8
        }
    },
    data() {
        return {
            imgLoaded: false
        };
    }
}
</script>

<style lang="scss">
.load-image-show {
    width: 100%;
    height: 100%;
    transition: opacity 0.6s ease-in;
    opacity: 0;
    &.load {
        opacity: 1;
    }
}
.load-image-default {
    width: 100%;
    height: 100%;
}
</style>