Image

The Image component provides an enhanced image loading experience by utilizing lazy-loading, optional placeholders, and custom visual styles.

Usage

Use the Image component to improve your website's performance and provide a smooth visual experience for your users.

Basic Image

Standard image without lazy-loading or placeholder.

<Image src="https://images.unsplash.com/photo-1620120966883-d977b57a96ec" alt="Basic Image" />

Image with Placeholder

Image with a placeholder that appears until the main image is fully loaded.

<Image src="https://images.unsplash.com/photo-1620120966883-d977b57a96ec" alt="Image with Placeholder" placeholder="https://via.placeholder.com/50x50" />

Lazy-loaded Image

Image that loads when it enters the viewport, improving initial page load times.

<Image src="https://images.unsplash.com/photo-1620120966883-d977b57a96ec" alt="Lazy-loaded Image" lazyLoad={true} />

Image with Styling

Image with custom width, height, and rounded corners.

<Image src="https://images.unsplash.com/photo-1620120966883-d977b57a96ec" alt="Styled Image" width="200px" height="150px" radius="medium" />

API

Props

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
src	string	-	Yes
alt	string	-	Yes
placeholder	string	-	-
width	string | number	-	-
height	string | number	-	-
lazyLoad	boolean	true	-
objectFit	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	'cover'	-
onLoad	()=>void	-	-
onError	()=>void	-	-
MarginProps	Token<MarginProps>	-	-
radius	ThemeRadius	-	-