Image
Displays image content.
Image will show Skeleton until the image is loaded.
We are using a similar api to next/image component.
Layout
The layout behavior of the image as the viewport changes size. Defaults to intrinsic.
When fixed, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element.
When intrinsic, the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.
When responsive, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
When fill, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative. This is usually paired with the object-fit css property.
API
Learn more about the properties and the customization points.
Usage
import Image from "@sonnat/ui/Image";//orimport { Image } from "@sonnat/ui";
Properties
Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Append to the class names applied to the component so you can override or extend the styles. |
| src | string | object | - | The size of the image. Must be one of the following: 1- A statically imported image file, or 2- A path string. |
| width | string | number | - | The width of the image, in pixels. Must be an integer without a unit. Required, except for statically imported images, or those with layout="fill". |
| height | string | number | - | The height of the image, in pixels. Must be an integer without a unit. Required, except for statically imported images, or those with layout="fill". |
| layout | "fill" | "fixed" | "intrinsic" | "responsive" | "intrinsic" | The layout behavior of the image as the viewport changes size. |
| |||