Image

Image is able to show picture(s), that could display placeholder simple image when loading pretty large pictures, also it could fallback to broken image if picture loading failed.

In addition, the following HTML native attributes are also supported: crossOrigindecodingloadingreferrerPolicysizessrcSetuseMap.

<Image src={SOME_IMAGE_SRC} />

Example

Basic usage of Image component.

Showcase fill modes.

API

PropertiesDescriptionTypeDefault
altThe description of the image/picturestring-
draggableWhether to allow users to drag the imagebooleanfalse
fallbackThe fallback broken image when load failedReactNodedefault fallback ReactNode
fitThe fill mode of the imagecontain | cover | fill | none | scale-downfill
heightThe height of the image, if a number is passed in, the unit is pxstring | number-
lazyWhether to load image lazilybooleanfalse
onClickThe image click event(event: React.MouseEvent<HTMLImageElement, Event>) => void-
onContainerClickThe content click event(event: React.MouseEvent<HTMLDivElement, Event>) => void-
onErrorCallback when failed to load(event: React.SyntheticEvent<HTMLImageElement, Event>) => void-
onLoadTriggered when image loaded(event: React.SyntheticEvent<HTMLImageElement, Event>) => void-
placeholderThe placeholder when loading the imageReactNodedefault placeholder ReactNode
srcThe address of the imagestring-
widthThe width of the image, if a number is passed in, the unit is pxstring | number-
ON THIS PAGE