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
alt
string;
children?
undefined;
datatype?
string;
fit?
"contain" | "cover" | "fill" | "none" | "scaleDown";
"none"
height?
HeightProp;
position?
ObjectFitProp;
"none"
role?
AriaRole;
sizes?
string;
slot?
string;
src?
string;
srcSet?
string;
title?
string;
width?
WidthProp;
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.