FrontOffice/src/FrontOffice.Main/Shared/AppImage.razor

@inject ImageCacheService ImageCache

@if (_loading)
{
    <MudSkeleton SkeletonType="SkeletonType.Rectangle"
                 Width="@(ImgWidth > 0 ? $"{ImgWidth}px" : SkeletonWidth)"
                 Height="@(ImgHeight > 0 ? $"{ImgHeight}px" : SkeletonHeight)"
                 Class="@Class" Style="@Style" />
}
else if (!string.IsNullOrWhiteSpace(_resolvedSrc))
{
    <MudImage Src="@_resolvedSrc"
              Alt="@Alt"
              ObjectFit="@ObjectFit"
              ObjectPosition="@ObjectPosition"
              Elevation="@Elevation"
              Fluid="@Fluid"
              Width="@ImgWidth"
              Height="@ImgHeight"
              Style="@Style"
              Class="@Class" />
}
else if (!string.IsNullOrWhiteSpace(Fallback))
{
    <div class="@($"d-flex align-center justify-center {Class}")" style="@Style">
        <MudIcon Icon="@Fallback" Size="Size.Large" Style="color:rgba(0,0,0,.15);" />
    </div>
}

@code {
    /// <summary>مسیر تصویر (نسبی، data-URI، یا http)</summary>
    [Parameter] public string? Path { get; set; }

    /// <summary>متن جایگزین</summary>
    [Parameter] public string? Alt { get; set; }

    /// <summary>نحوه جایگیری تصویر</summary>
    [Parameter] public ObjectFit ObjectFit { get; set; } = ObjectFit.Cover;

    /// <summary>موقعیت تصویر</summary>
    [Parameter] public ObjectPosition ObjectPosition { get; set; } = ObjectPosition.Center;

    /// <summary>سایه تصویر</summary>
    [Parameter] public int Elevation { get; set; }

    /// <summary>تصویر سیال (100% عرض)</summary>
    [Parameter] public bool Fluid { get; set; }

    /// <summary>استایل inline</summary>
    [Parameter] public string? Style { get; set; }

    /// <summary>کلاس CSS</summary>
    [Parameter] public string? Class { get; set; }

    /// <summary>عرض تصویر (پیکسل) — مانند MudImage</summary>
    [Parameter] public int? ImgWidth { get; set; }

    /// <summary>ارتفاع تصویر (پیکسل) — مانند MudImage</summary>
    [Parameter] public int? ImgHeight { get; set; }

    /// <summary>عرض placeholder skeleton (مقدار CSS)</summary>
    [Parameter] public string? SkeletonWidth { get; set; }

    /// <summary>ارتفاع placeholder skeleton (مقدار CSS)</summary>
    [Parameter] public string? SkeletonHeight { get; set; }

    /// <summary>آیکون fallback هنگام عدم وجود تصویر</summary>
    [Parameter] public string? Fallback { get; set; }

    private string? _resolvedSrc;
    private bool _loading;
    private string? _lastPath;

    protected override async Task OnParametersSetAsync()
    {
        // فقط وقتی Path تغییر کرده، resolve مجدد انجام شود
        if (Path == _lastPath) return;
        _lastPath = Path;

        if (string.IsNullOrWhiteSpace(Path))
        {
            _resolvedSrc = null;
            _loading = false;
            return;
        }

        // اگر قبلاً base64 هست → نمایش فوری
        if (Path.StartsWith("data:", StringComparison.Ordinal))
        {
            _resolvedSrc = Path;
            _loading = false;
            return;
        }

        _loading = true;
        StateHasChanged();

        _resolvedSrc = await ImageCache.ResolveAsync(Path);
        _loading = false;
    }
}