PreviewImage.razor

@using Microsoft.AspNetCore.StaticFiles
@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
{
	<img src="@PreviewImageUrl"
	     alt="Preview image blogpost"
	     loading="@LazyLoadTag"
	     decoding="@DecodingTag"
	     class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" />
}
else
{
	<picture class="position-absolute top-0 start-0 w-100 h-100">
		<source srcset="@PreviewImageUrl" type="@GetMimeType()" />
		<img src="@PreviewImageUrlFallback"
		     alt="Preview image blogpost"
		     loading="@LazyLoadTag"
		     decoding="@DecodingTag"
		     class="w-100 h-100 object-fit-cover" />
	</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;
    }
}