Blazor Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them.

Parameters

Name	Type	Default	Required	Description	Added Version
Alt	string?	null		Gets or sets the alternate text for the image.	3.0.0
Src	string?	null		Gets or sets the source of the image.	3.0.0
IsResponsive	bool	true		Gets or sets a value indicating whether the image is responsive.	3.0.0
IsThumbnail	bool	false		Makes the image have a rounded 1px border appearance if set to true.	3.0.0

Examples

Images

By default images are responsive. The default value of the IsResponsive parameter is true.

<Image Src="/images/placeholder.png" Alt="placeholder" />

See demo here.

Image thumbnails

To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.

<Image Src="/images/placeholder.png" IsThumbnail="true" Alt="placeholder" />

See demo here.

Aligning images

<Image Src="/images/placeholder.png" Class="rounded float-start" Alt="placeholder1" />
<Image Src="/images/placeholder.png" Class="rounded float-end" Alt="placeholder2" />

<Image Src="/images/placeholder.png" Class="rounded mx-auto d-block" Alt="placeholder" />

<div class="text-center">
    <Image Src="/images/placeholder.png" Class="rounded" Alt="placeholder" />
</div>

See demo here.