PreviewImage.razor

@using Microsoft.AspNetCore.StaticFiles
@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
{
    <img class="preview-img" src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
}
else
{
    <picture>
        <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
        <img class="preview-img" src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
    </picture>
}

@code {
    [Parameter, EditorRequired]
    public required string PreviewImageUrl { get; set; }

    [Parameter]
    public string? PreviewImageUrlFallback { get; set; }

    [Parameter]
    public bool LazyLoadImage { get; set; }

    private string LazyLoadTag => LazyLoadImage ? "lazy" : "eager";
    private string DecodingTag => LazyLoadImage ? "async" : "auto";

    private static readonly FileExtensionContentTypeProvider Provider = new();

    static PreviewImage()
    {
	    Provider.Mappings.TryAdd(".avif", "image/avif");
    }

    private string? GetMimeType()
    {
        Provider.TryGetContentType(PreviewImageUrl, out var contentType);
        return contentType;
    }
}