Ant Design Blazor
Image
Previewable image.
When To Use
- When you need to display pictures.
- Display when loading a large image or fault tolerant handling when loading fail.
Examples
Click the image to zoom in.
Progressive when large image loading.
Preview a collection from one image.
You can make preview controlled.
Load failed to display image placeholder.
Click the left and right switch buttons to preview multiple images.
You can set different preview image.
Image API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Alt | ParameterAlternative text for image | String | -- |
| Fallback | ParameterFallback if image fails to load | String | -- |
| Height | ParameterHeight of image | String | -- |
| Width | ParameterWidth of image | String | -- |
| Placeholder | ParameterLoading placeholder | RenderFragment | -- |
| Preview | ParameterEnable or disable preview functionality | Boolean | true |
| PreviewVisible | ParameterIf the preview is visible or not | Boolean | -- |
| Src | ParameterImage source | String | -- |
| PreviewSrc | ParameterPreview image source | String | -- |
| PreviewVisibleChanged | ParameterCallback executed when AntDesign.Image.PreviewVisible changes |
EventCallback<Boolean> | -- |
| OnClick | ParameterCallback executed on image click | EventCallback<MouseEventArgs> | -- |
| Locale | ParameterLocale data for component | ImageLocale | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
ImagePreviewGroup API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent for group. Typically contains Image elements. |
RenderFragment | -- |
| PreviewVisible | ParameterWhether to open the preview image. Two-way binding. | Boolean | true |
| PreviewVisibleChanged | ParameterCallback executed when AntDesign.ImagePreviewGroup.PreviewVisible changes |
EventCallback<Boolean> | -- |