Image
The Image component is a container for responsive images.
Playground
Props
Examples
Fixed Square Sizes
Responsive Images with Ratios
16 by 9
4 by 3
1 by 1
Props
| Prop | Type | Default | Description |
|---|---|---|---|
alt | string | - | The accessible alternative text (required). |
className | string | - | Additional CSS classes. |
preload | boolean | false | Preloads the image. |
quality | number | 80 | The quality of the image (1-100). |
ratio | ThemeImageRatio | - | Sets the aspect ratio of the image. |
rounded | boolean | false | Applies rounded corners to the image. |
size | ThemeImageSize | { w: number; h: number } | - | Sets the size of the image container. |
src | string | - | The source URL of the image. |
zoom | boolean | false | Enables clicking on the image to open it in a showcase. |
See also
Last updated on