Image
The <Image> is a content component that renders an image on the page.
The src property is always required. It can be used with a link or with an image from the server's file system.
To improve accessibility, alt information should be provided whenever possible.
The alt attribute holds a text description of the image and screen readers read this description out to their users so they know what the image means. The alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
For more information about accessibility please visit w3.org or bitvtest.de
Import
import { Image } from '@marigold/components';Apperance
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
alt (required) | string | - | The alt tag contains descriptive text that is displayed when an image fails to load or is read aloud when a user interacts with a screen reader on the page. |
fit | "contain" | "cover" | "fill" | "none" | "scale-down" | - | Resized the Image to fit its container |
position | "bottom" | "center" | "left" | "right" | "top" | "leftBottom" | "rightBottom" | "leftTop" | "rightTop" | - | Position the Image inside the container when you use "fit" |
Usage
Simple Image
In this example you can see a <Image> Component.
Image with fit and position
In this example, the <Image> gets the <fit> property and the <position> property is set to bottom. You also need to wrap the <Image> in a <Ratio> component so that the fit and position properties can be used.