logo

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.

expand code expand code

Progressive when large image loading.

expand code expand code

You can set different preview image.

expand code expand code

You can make preview controlled.

expand code expand code

Load failed to display image placeholder.

expand code expand code

Click the left and right switch buttons to preview multiple images.

expand code expand code

Preview a collection from one image.

expand code expand code

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> --
Empty List
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.