Image

Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden.

import { Image } from "@mittwald/flow-react-components";

<Image
  src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
  alt="mittwald"
  width={200}
/>

Best Practices

Wähle Bilder, die zum Kontext und zur Gestaltung passen.
Beschreibe Inhalt oder Zweck über einen aussagekräftigen alt-Text. Rein dekorative Bilder erhalten ein leeres alt-Attribut (alt="").
Optimiere die Größenverhältnisse für kurze Ladezeiten.
Wähle Auflösung und Seitenverhältnis konsistent.
Setze bei geringem Kontrast zum Hintergrund eine sichtbare Border.
Verzichte möglichst auf Text im Bild. Screenreader erfassen ihn nicht.
Nutze für verschiedene Bildschirmgrößen das srcSet-Attribut. Es wählt je nach Pixeldichte automatisch die passende Auflösung (siehe Responsive Images‍).

Border

Mit der Property withBorder erhält die Image-Component eine Border und zusätzlich einen Border Radius. Das ist insbesondere bei Bildern mit geringem Kontrast zum Hintergrund von Vorteil, da es die visuelle Abgrenzung verbessert und die Bildwahrnehmung unterstützt.

Fixes Seitenverhältnis

Die Property aspectRatio definiert das Seitenverhältnis der Image-Component. Weicht das Seitenverhältnis des eingebetteten Bildes ab – etwa durch eine größere Höhe oder Breite –, wird das Bild zentriert, und überstehende Bereiche außerhalb des festgelegten Verhältnisses werden ausgeblendet.

Properties

Property	Type	Default	Description
`aspectRatio`	`number`	-	The aspect ratio of the images container. Larger images will be centered and their overflow will be hidden.
`withBorder`	`boolean`	-	Display the image with border and rounded edges.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components