Leave Yamada UI a star
StarPicture is a component that uses the picture element to provide alternative images for different display or device scenarios.
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"Description
If true, the sources will be sorted by the minW and maxW properties.
Type
booleanDefault
trueDescription
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>>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
beforeLoadOrErrorDescription
The CSS object-fit property.
Type
UIValue<ObjectFit>Description
If true, opt out of the fallbackSrc logic and use as img.
Type
booleanDefault
falseDescription
The image loading attribute.
Type
"eager" | "lazy"Description
A callback for when there was an error loading the image src.
Type
ReactEventHandler<HTMLImageElement>Description
A callback for when the image src has been loaded.
Type
ReactEventHandler<HTMLImageElement>Description
The props for the picture element.
Type
HTMLUIProps<"picture">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">Description
The image sizes attribute.
Type
stringDescription
The sources for the picture element.
Type
PictureSource[]Description
The image src attribute.
Type
stringDescription
The image srcset attribute.
Type
stringEdit this page on GitHub