React
Is new design vision part implemented using new tokens?
Update required
Resources
Example
import { Image } from '@optimus-web/core';
<Image src={url} imageRatio="16/9" />
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
src |
URL of the image to be displayed. |
string |
|
|
onLoad? |
Callback function triggered when the image has loaded. |
(event: SyntheticEvent<HTMLElement>) => void; |
|
|
shouldShowLoader? |
Indicates if a loading indicator should be displayed while the image is loading. |
boolean |
|
|
loaderDelay? |
Time in milliseconds before the loader appears. |
number |
|
|
forwardedRef? |
Ref to the component's outer div element. |
React.Ref<HTMLDivElement> |
|
|
rounded? |
Applies rounded corners to the image. |
boolean |
|
|
objectFit? |
Defines how the image fits within its container. |
'contain' | 'cover' |
|
|
objectPosition? |
Sets the initial position of the image within its container. |
string |
|
|
placeholderProps? |
Props for the placeholder displayed while the image is loading. |
PlaceholderProps |
|
|
imageRatio? |
Aspect ratio of the image. |
'1' | '16/9' | '5/2' |
|
|
block? |
If true, the image container uses block layout behavior. |
boolean |
|