Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Image

Image is a component that displays images with fallback support.

Source@yamada-ui/image

Props

ImageProps

crossOrigin

Description

The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.

Type

"" | "anonymous" | "use-credentials"

fallback

Description

Fallback image src or element to show if image is loading or image fails.

Type

type ONLY_FOR_FORMAT = | string | ReactElement<any, string | JSXElementConstructor<any>>

fallbackStrategy

Description

- beforeLoadOrError: loads the fallbackImage while loading the src. - onError: loads the fallbackImage only if there is an error fetching the src.

Type

"onError" | "beforeLoadOrError"

Default

beforeLoadOrError

fit

Description

The CSS object-fit property.

Type

UIValue<ObjectFit>

ignoreFallback

Description

If true, opt out of the fallbackSrc logic and use as img.

Type

boolean

Default

false

loading

Description

The image loading attribute.

Type

"eager" | "lazy"

onError

Description

A callback for when there was an error loading the image src.

Type

ReactEventHandler<HTMLImageElement>

onLoad

Description

A callback for when the image src has been loaded.

Type

ReactEventHandler<HTMLImageElement>

size

Deprecated

Description

The CSS box-size property.

Deprecated

Use boxSize instead.

Type

UIValue<number | "px" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "0.5" | "1" | "1.5" | "2" | "2.5" | "2xs" | "3" | "3.5" | "3xl" | "3xs" | "4" | "4.5" | "4xl" | "4xs" | "5" | "5.5" | ... 64 more ... | "min-intrinsic">

sizes

Description

The image sizes attribute.

Type

string

src

Description

The image src attribute.

Type

string

srcSet

Description

The image srcset attribute.

Type

string

Edit this page on GitHub

PreviousMedia and IconsNextNativeImage