Image
Basic Usage
The simplest way to display images
<Image src={getExampleImage({ width: 400, height: 300 })} alt="Example image" />Rounded Corners and Shadow Effects
Add visual effects using the rounded and shadow properties
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 1 })} alt="Example image" rounded="lg" shadow="md" />Hover Interaction Effects
Add hover effects using the hover property, supporting scaling, brightness changes, and blur effects
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 2 })} alt="Example image" hover="scale" rounded="md" />Loading Indicators
Display different types of loading indicators when remote images are loading
<Image src={getExampleImage({ width: 800, height: 600, randomSeed: 3 })} alt="Large remote image" loadingIndicator="spinner" /><Image src={getExampleImage({ width: 800, height: 600, randomSeed: 4 })} alt="Large remote image" loadingIndicator="progress" />Object Fit Methods
Control how images fill their containers using the objectFit property
<Image src={getExampleImage({ width: 600, height: 400, randomSeed: 5 })} alt="Example image" objectFit="contain" width={300} height={200} />Transition Animation Effects
Add transition animation effects using the transition property
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 6 })} alt="Example image" transition="fade" hover="brightness" />