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.
![Blazor Bootstrap: Image Component](https://i.imgur.com/QrSaauv.png)
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.
![Blazor Bootstrap: Image Component](https://i.imgur.com/QrSaauv.png)
<Image Src="/images/placeholder.png" Alt="placeholder" />
Image thumbnails
To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.
![Blazor Bootstrap: Image Component - Image thumbnails](https://i.imgur.com/LKgmorK.png)
<Image Src="/images/placeholder.png" IsThumbnail="true" Alt="placeholder" />
Aligning images
![Blazor Bootstrap: Image Component - Aligning images](https://i.imgur.com/sGdkb8c.png)
<Image Src="/images/placeholder.png" Class="rounded float-start" Alt="placeholder1" />
<Image Src="/images/placeholder.png" Class="rounded float-end" Alt="placeholder2" />
![Blazor Bootstrap: Image Component - Aligning images](https://i.imgur.com/LBp2172.png)
<Image Src="/images/placeholder.png" Class="rounded mx-auto d-block" Alt="placeholder" />
![Blazor Bootstrap: Image Component - Aligning images](https://i.imgur.com/7BPXWXs.png)
<div class="text-center">
<Image Src="/images/placeholder.png" Class="rounded" Alt="placeholder" />
</div>