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;

specifies an alternate text for an image, if the image cannot be displayed.

children?

undefined;

The children of the component.

datatype?

string;

fit?

"contain" | "cover" | "fill" | "none" | "scaleDown";

Set the object-fit property for the element.

Defaults to:

"none"

height?

HeightProp;

position?

ObjectFitProp;

Set the object-position property for the element. You can see allowed tokens here.

Defaults to:

"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.

Preview

Code

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.

Preview

Code

Last update: July 15, 2024