Image
An image displays graphical content such as a photo or illustration.
Best Practices
Do
Provide descriptive, accurate and concise description for
altattribute in order to be accessible to screen readers.The
altdescription should also include and consider the context where the image fits in.Decorative images should be excluded for assistive tools, thus adding
role="presentation"oraria-hidden="true".
Don't
Don't include "image of", "picture of" etc. in the
altattribute since it is redundant.Don't repeat the same information that is already on the page on the
altattribute.
Default
| Name | Description | Default | Control |
|---|---|---|---|
| bordered | An image can appear with rectangular border. boolean | - | |
| fit | An image can set how it should be resized to fit its container. "center""none""contain""cover" | - | |
| block | An image can take up the width of its container. boolean | - | |
| shape | An image can appear square, circular, or rounded. "circular""square""rounded" | - | |
| shadow | An image can appear elevated with shadow. boolean | - | |
| alt | description of the image, which isn't mandatory but is incredibly useful for accessibility - | ||
| src | path to the image you want to display - |
Stories
Shape
Images can be styled as square (default), circular, or with rounded corners.
Bordered
The bordered prop will apply a border style to images regardless of its shape.
Fallback
In cases when images fail to load, the Image component will result into the native <img/> browser fallback.
Fit
The fit prop is used to determine how the image should be resized in order to fit its container.
The image can be resized in various ways: centering to its container(center),
filling its container (cover) or preserving the aspect ratio (contain).