如何用MudSkeleton配合MudImage实现图片加载占位及无效URI处理？

原来的判断逻辑只检查URI是否存在，没法处理无效URI导致加载失败的情况。可以通过状态变量结合MudImage的加载事件来解决：

• 定义布尔变量_showSkeleton，初始设为true，用来控制骨架屏的显示
• 给MudImage绑定OnLoad和OnError事件，不管加载成功还是失败，都把_showSkeleton设为false
• 用相对定位容器让骨架屏和图片重叠，通过Visible属性控制显示状态

完整代码示例：

@code {
    [Parameter] public string? ImageUri { get; set; }
    [Parameter] public int Width { get; set; } = 200;
    [Parameter] public int Height { get; set; } = 200;

    private bool _showSkeleton = true;

    private void HandleImageLoad()
    {
        _showSkeleton = false;
    }

    private void HandleImageError()
    {
        _showSkeleton = false;
    }
}

<div style="position: relative; width: @($"{Width}px"); height: @($"{Height}px");">
    <!-- 骨架屏：加载完成/失败后隐藏 -->
    <MudSkeleton Width="@($"{Width}px")" Height="@($"{Height}px")" Visible="@_showSkeleton" />
    
    <!-- 图片：初始隐藏，加载完成后显示 -->
    <MudImage 
        Src="@ImageUri" 
        Height="@Height" 
        Width="@Width" 
        ObjectFit="ObjectFit.Contain"
        Visible="@(!_showSkeleton)"
        OnLoad="HandleImageLoad"
        OnError="HandleImageError"
        Alt="加载图片" />
        
    <!-- 可选：加载失败时显示错误占位 -->
    @if (!_showSkeleton && !string.IsNullOrEmpty(ImageUri))
    {
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5;">
            <MudIcon Icon="@Icons.Material.Filled.BrokenImage" Size="Size.Large" Color="Color.Error" />
        </div>
    }
</div>

关键说明： #

• 相对定位容器避免骨架屏和图片切换时出现布局跳动
• Visible属性比if判断更灵活，能精准控制组件显示/隐藏
• OnLoad处理加载成功场景，OnError覆盖无效URI、网络错误等加载失败情况
• 错误占位可根据需求自定义，比如替换成默认图片或文字提示

内容的提问来源于stack exchange，提问作者Nejc Kikelj