Image

A lazy image that keeps its space.

An interactive page: C# runs over a Blazor Server connection.

An image that loads lazily and keeps its space while loading: width and height or a Ratio reserve the box, so the page doesn't jump. Caption wraps it in a figure.

Usage

razor

<Image Src="/shots/console.png" Alt="The rules list" Ratio="16 / 9.0" Radius="Radius.Lg" />

Ratio and fit

Use Ratio for the shape and Fit for whether the image fills it (Cover) or fits inside it (Contain).

Preview Code

Preview

The IzzyBlazor social card, cropped to 4:3 — Ratio 4:3, Cover

The IzzyBlazor social card, fitted into 4:3 — Ratio 4:3, Contain

Code

Fit.razor

<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4" Grow>
    <Image Src="og-image.png" Alt="The IzzyBlazor social card, cropped to 4:3" Ratio="4 / 3.0" Radius="Radius.Lg" Caption="Ratio 4:3, Cover" />
    <Image Src="og-image.png" Alt="The IzzyBlazor social card, fitted into 4:3" Ratio="4 / 3.0" Fit="ImageFit.Contain" Radius="Radius.Lg" Bg="Color.Fill" Caption="Ratio 4:3, Contain" />
</Grid>

Its own size

Use IntrinsicWidth and IntrinsicHeight so the browser keeps the image's space before it loads.

Preview Code

Preview

The IzzyBlazor social card: Blazor components, no circuit required

Code

Intrinsic.razor

<Image Src="og-image.png" Alt="The IzzyBlazor social card: Blazor components, no circuit required"
       IntrinsicWidth="1200" IntrinsicHeight="630" Radius="Radius.Lg" MaxWidth="32.Rem" />

Mode support

What works in each mode, Image
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a native img whose alt is Alt, a required parameter: say what the picture shows.
Pass Alt="" for a purely decorative image, so screen readers skip it.
Caption wraps it in a figure with a figcaption; screen readers read both, so don't repeat the caption in Alt.

Parameters

Image parameters
Prop	Type	Default
`Src`The image URL.	`string`	Required
`Alt`What the image shows, for screen readers and when it fails to load.	`string`	Required
`IntrinsicWidth`The image's own width in pixels, so the browser reserves its space before it loads.	`int?`
`IntrinsicHeight`The image's own height in pixels.	`int?`
`Ratio`A shape to show it in, width over height, such as 16 / 9.0 or 1; the image fills it per Fit.	`double?`
`Fit`How it fills a Ratio of a different shape.	`ImageFit`	`ImageFit.Cover`
`Lazy`Loads only when the image nears the screen.	`bool`	`true`
`Caption`A caption under the image; wraps it in a figure.	`string?`

Plus 25 surface props, 16 item props and 4 common props.

Full API