Image
Usage
Image component is a wrapper around img element with option to change object fit, radius and placeholder:
Width and height
In the example above, the image takes 100% of the width of its container and height is calculated dynamically based on image proportion. To change this behavior, set image width and height to define image size.
Note that if image proportions do not match the given width and height, some parts will be cut out.
In case you want to show the image with its original proportions and want it to fit in the current width and height, set fit="contain"
:
Placeholder
By default, image placeholders are disabled. Image placeholder is displayed in these cases:
withPlaceholder
prop is set to true- Error occurred during image loading (e.g. broken link)
- Image did not receive
src
prop
To customize image placeholder pass any react node to placeholder
prop.
Placeholder size is determined by width and height props.
Placeholder is centered vertically and horizontally across provided width and height.
With caption
You can add figcaption to an image with caption
prop:
Get refs
You can get both image and root element (div
) refs with ref
and imageRef
props:
Image component props
Name | Type | Description |
---|---|---|
alt | string | Image alt text, used as title for placeholder if image was not loaded |
caption | ReactNode | Image figcaption, displayed below image |
fit | "contain" | "fill" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "cover" | "scale-down" | Image object-fit property |
height | string | number | Image height, defaults to original image height adjusted to given width |
imageProps | Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> | Props spread to img element |
imageRef | ForwardedRef<HTMLImageElement> | Get image element ref |
placeholder | ReactNode | Customize placeholder content |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, 0 by default |
src | string | Image src |
width | string | number | Image width, defaults to 100%, cannot exceed 100% |
withPlaceholder | boolean | Enable placeholder when image is loading and when image fails to load |
Image component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Image-root | Root element |
imageWrapper | .asuikit-Image-imageWrapper | Wraps image and placeholder |
placeholder | .asuikit-Image-placeholder | Placeholder wrapper |
figure | .asuikit-Image-figure | figure element, wrap image and figcaption |
image | .asuikit-Image-image | img element |
caption | .asuikit-Image-caption | figcaption element |