Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsData display

Image

MudImage renders an img with theme-aware elevation, fluid sizing and object-fit control. Use it for photographs and illustrations; every image needs alt text, or an empty alt when it is decorative.

Fixed and fluid sizes

Width and Height set the image's size in pixels. Fluid scales it to the container's width instead, keeping the aspect ratio.

Width="240" Height="135"

Green hills under a pale sky, with a red cottage

Fluid="true" fills the column

Green hills under a pale sky, with a red cottage

Every fit and position

ObjectFit × ObjectPosition for a wide picture in a square frame. Fill stretches; Cover crops; Contain and ScaleDown letterbox; None keeps the natural size. Position chooses which part stays visible.

MudImage: ObjectPosition × ObjectFit in an 88 × 88 frame
ObjectPosition ↓ · ObjectFit →NoneCoverContainFillScaleDown
Center
Top
Bottom
Left
LeftTop
LeftBottom
Right
RightTop
RightBottom

Elevation and shape

Elevation adds a shadow. Rounded corners come from the border-radius utility classes, and rounded-circle turns a square crop into a portrait disc.

Still life of two pears on a table Elevation 0
Still life of two pears on a table Elevation 4
Still life of two pears on a table Elevation 12, rounded
Still life of two pears on a table rounded-lg
Still life of two pears on a table rounded-circle

Fallback source

When Src fails to load, FallbackSrc replaces it. Keep the fallback local so it cannot fail for the same reason.

Cover of The Harbour Atlas Src loads
Cover not available Src fails, fallback shows

An exhibition grid

Uniform thumbnails from mixed artwork: Cover with a fixed height fills each frame, and figure captions name every piece.

Orange sun setting over dark water
Harbour at dusk M. Lindqvist
Three tall blocks in red, ochre and teal
Three towers A. Osei
Rows of green crops under a white sky
Field study R. Duarte
A small planet circling a large one on navy
Orbit C. Moreau
A round loaf and a knife on a board
Bread, still life S. Berg
Concentric rings in vermilion on cream
Signal Y. Demir

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Green hills under a pale sky, with a red cottage
ObjectFit
ObjectPosition
Width (px)
Height (px)
Elevation
<MudImage
    Src="@source"
    Alt="Green hills under a pale sky, with a red cottage"
    Width="200"
    Height="200"
    ObjectFit="ObjectFit.Cover"
    ObjectPosition="ObjectPosition.Left"
    Elevation="2"
    Class="rounded-lg" />

Starting .NET in your browser…