Image Component

Summary

This PR introduces an Image component that renders images from non-HTTP sources (bytes or streams) with streaming JS interop and optional browser-side caching.

Features

• Simple source model
  • ImageSource from byte[] or Stream with MimeType and CacheKey properties
  • Single-use design: one ImageSource instance corresponds to exactly one image load
  • Properties: MimeType, CacheKey, Length.
• Automatic caching
  • Caching backed by the browser Cache Storage API, keyed by CacheKey.
• Stream-based transfer
  • Uses DotNetStreamReference for efficient streaming from .NET to JS
  • Supports progress tracking via CSS custom property --blazor-image-progress
  • Robust cancellation/race handling: only the latest request for an element is finalized
• Minimal markup and CSS-driven UX
  • Renders a single with "data-blazor-image" attribute.
  • data-state="loading" or "error" enables styling via CSS.
  • Container can read a CSS custom property --blazor-image-progress for simple progress UI.
• Lifecycle and memory safety
  • Blob URL creation/revocation handled in JS.

API surface

• Parameters
  • Source: ImageSource
  • AdditionalAttributes: forwarded to the underlying (e.g., alt, class, style)
• Render output
  • <img data-blazor-image data-state="loading|error" ... />

Implementation

• Component and model
  • src/Components/Web/src/Image/Image.cs
  • src/Components/Web/src/Image/ImageSource.cs
• JavaScript interop
  • src/Components/Web.JS/src/Rendering/BinaryImageComponent.ts
• Tests
  • Unit: src/Components/Web/test/Image/ImageTest.cs
  • E2E test component: src/Components/test/testassets/BasicTestApp/ImageTest/ImageTestComponent.razor
  • E2E: src/Components/test/E2ETest/Tests/ImageTest.cs

Performance considerations

• Stream-based transfer avoids large memory allocations
• Blob URLs are revoked when no longer needed.
• Cache-first load avoids redundant streaming for repeated images

@using Microsoft.AspNetCore.Components.Web.Image

@code {
    private ImageSource? _photo;

    protected override async Task OnInitializedAsync()
    {
        var bytes = await PhotoService.GetBytesAsync(id: 42);
        _photo = new ImageSource(bytes, "image/jpeg", cacheKey: "photo-42");
    }
}

<Image Source="@_photo"
       alt="Product photo"
       style="max-width: 100%; height: auto;" />

Related to -> #25274