更新记录

1.0.1（2025-04-02） 下载此版本

第一版 无图片，或者图片加载失败，或者图片较大，等待加载的时候，会显示占位图。不会出现图片空白的情况。

平台兼容性

uni-app

使用方法

import WolfImage from '@/components/wolf-image/wolf-image.vue';
components:{
    WolfImage
},

<WolfImage 
    :src="'https://ceshi2.sdykt.com.cn/etonmallio/dj-image/2025/03/28/67e6583e28bab1.25172453.png'"
    :width="260"
    :height="260"
    :radiusTopLeft="16"
    :radiusTopRight="16"
    :radiusBottomLeft="16"
    :radiusBottomRight="16"
    :mWidth="120"
    :mHeight="120"
    :emptyBgColor="'#F5f5f5'"
    :emptyImgUrl="''"
    :needShowBigImg="true"
    :windowHeight="windowHeight"
/>

参数

说明

无图片，或者图片加载失败，或者图片较大，等待加载的时候，会显示占位图。不会出现图片空白的情况。

示例

<template>
    <view class="content">
        <WolfImage 
            :src="'https://ceshi2.sdykt.com.cn/etonmallio/dj-image/2025/03/28/67e6583e28bab1.25172453.png'"
            :width="260"
            :height="260"
            :radiusTopLeft="16"
            :radiusTopRight="16"
            :radiusBottomLeft="16"
            :radiusBottomRight="16"
            :mWidth="120"
            :mHeight="120"
            :emptyBgColor="'#F5f5f5'"
            :emptyImgUrl="''"
            :needShowBigImg="true"
            :windowHeight="windowHeight"
        />
    </view>
</template>

<script>
    import WolfImage from '@/components/wolf-image/wolf-image.vue'
    export default {
        components: {
            WolfImage
        },
        data() {
            return {
                windowHeight: 0
            }
        },
        onLoad() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

可以出现例图的效果。