Bild

Bild in Storybook

Verwendung

Die Image-Komponente ist eine technische Komponente, die die Verwendung des HTML-img-Tags unterstützt. Empfehlungen zur Verwendung finden Sie in der W3C-Dokumentation.

Code

<Image src="path/to/image" />

Importanweisung

import { Image } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

srcerforderlich

Typ

string

Beschreibung

Specifies the URL of the image.

alt

Typ

IntlMessageShape

Beschreibung

Specifies an alternate text for the image.

className

Typ

string

Beschreibung

CSS class name for this component.

containerClassName

Typ

string

Beschreibung

Class name for the containing figure node.

figcaption

Typ

IntlMessageShape

Beschreibung

The caption for the figure.

onError

Typ

func

Beschreibung

Script to be run when an error occurs when the image is being loaded.

onLoad

Typ

func

Beschreibung

Script to be run when the image is loaded successfully.

showLoader

Typ

boolean

Beschreibung

Show a loader animation when the image is still loading.

Standardwert

true

sizes

Typ

string

Beschreibung

HTML <img> srcset attribute. See here for more info.

srcSet

Typ

string

Beschreibung

HTML <img> srcset attribute. See here for more info.

width

Typ

number

Beschreibung

Specifies the width of the image.

Hooks

Für image sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für image.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Bildkomponente und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für ein einfaches Bild

Die Bildkomponente macht das HTML-Tag <img> in Jutro verfügbar, einschließlich i18n und Metadaten, und umschließt es mit <figure>.

<Image src="path/to/image" />

Beispiel für eine Titelzeile

Die figcaption-Eigenschaft kann verwendet werden, um dem <figure>-Element eine Beschriftung hinzuzufügen.

<Image
  src="path/to/image"
  figcaption="This is a sample caption"
/>

Änderungsprotokoll