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
By default, image placeholders are disabled. Image placeholder is displayed in these cases:
withPlaceholderprop is set to true
- Image is currently loading
- Error occurred during image loading (e.g. broken link)
- Image did not receive
To customize image placeholder pass any react node to
Placeholder size is determined by width and height props.
Placeholder is centered vertically and horizontally across provided width and height.
You can add figcaption to an image with
Radius is applied both to the image and placeholder. Radius has predefined values: xs, sm, md, lg, xl which are defined in theme.radius. Alternatively, you can use a number to set border-radius in px:
You can get both image and root element (div) refs with
Use BackgroundImage component when you need to display the image below any content.
Component sets background-image to given
src, background-size to
cover and background-position to
It can be used for cards, hero headers and similar components: