Image
3.0.11
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
alt * | string | Specifies an alternate text for an image. Use "" if image is decorative. |
aspectRatio | "undefined" |
number | Override aspect ratio. Should be a ratio expressed as width divided by height, e.g. 3/2 or 1/1. |
className | string | Specifies additional CSS classes to be applied to the root element. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
errorFallback | Element | Specify a fallback to display if the image fails to load. |
imageSx | SxProps | Custom styles to be applied to the image element. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
loadingFallback | Element | Specify a fallback to display while the image is loading. |
onError | (event: SyntheticEvent) => void | Callback function triggered when the image fails to load. |
onLoad | (event: SyntheticEvent) => void | Callback function triggered when the image is successfully loaded. |
rootSx | SxProps | Custom styles to be applied to the root container of the image. |
sizes | string | Specifies an optional 'sizes' attribute for the image element. Should be used in conjunction with 'srcSet' to define image sizes for different viewport conditions. |
src * | string | The URL of the image to be displayed. |
srcSet | string | Specifies an optional 'srcset' attribute for the image element. |
npm install @sj-ab/component-library.ui.imageMeningsbärande bilder måste alltid ha en alt-text som beskriver bildens innehåll för användare som inte ser den.