Image component is a wrapper around img element with option to change object fit, radius and placeholder:
In the example above, the image takes 100% of 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 given width and height, some parts will be cut out.
In case you want to show image in its original proportions but fitted in current width and height set
By default, placeholders 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 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