Image
基础用法
最简单的图片展示方式
<Image src={getExampleImage({ width: 400, height: 300 })} alt="示例图片" />圆角和阴影效果
通过rounded和shadow属性添加视觉效果
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 1 })} alt="示例图片" rounded="lg" shadow="md" />悬停交互效果
通过hover属性添加悬停效果，支持缩放、亮度变化和模糊效果
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 2 })} alt="示例图片" hover="scale" rounded="md" />加载指示器
远程图片加载时显示不同类型的加载状态指示器
<Image src={getExampleImage({ width: 800, height: 600, randomSeed: 3 })} alt="远程大图" loadingIndicator="spinner" /><Image src={getExampleImage({ width: 800, height: 600, randomSeed: 4 })} alt="远程大图" loadingIndicator="progress" />对象填充方式
通过objectFit属性控制图片如何填充容器
<Image src={getExampleImage({ width: 600, height: 400, randomSeed: 5 })} alt="示例图片" objectFit="contain" width={300} height={200} />过渡动画效果
通过transition属性添加过渡动画效果
<Image src={getExampleImage({ width: 400, height: 300, randomSeed: 6 })} alt="示例图片" transition="fade" hover="brightness" />