Image

Image 组件是一个增强的图片组件，提供了丰富的功能，包括懒加载、加载状态指示、错误处理、以及各种视觉效果。

基础用法

---
/**
 * @component ImageBasic
 * @description Image 组件基础用法示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180 })}
  alt="示例图片"
  width={320}
  height={180}
/>

圆角和阴影效果

---
/**
 * @component ImageRoundedShadow
 * @description Image 组件圆角和阴影效果示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180, randomSeed: 1 })}
  alt="圆角阴影图片"
  rounded="lg"
  shadow="md"
  width={320}
  height={180}
/>

悬停交互效果

---
/**
 * @component ImageHover
 * @description Image 组件悬停交互效果示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180, randomSeed: 2 })}
  alt="悬停交互图片"
  hover="scale"
  rounded="md"
  width={320}
  height={180}
/>

加载指示器（Spinner）

---
/**
 * @component ImageLoadingIndicatorSpinner
 * @description Image 组件加载指示器 spinner 示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180, randomSeed: 3 })}
  alt="加载指示器图片"
  loadingIndicator="spinner"
  width={320}
  height={180}
/>

加载指示器（Progress）

---
/**
 * @component ImageLoadingIndicatorProgress
 * @description Image 组件加载指示器 progress 示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180, randomSeed: 4 })}
  alt="加载进度图片"
  loadingIndicator="progress"
  width={320}
  height={180}
/>

objectFit 填充方式

---
/**
 * @component ImageObjectFit
 * @description Image 组件 objectFit 示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 300, height: 200, randomSeed: 5 })}
  alt="objectFit 图片"
  objectFit="contain"
  width={300}
  height={200}
/>

过渡动画效果

---
/**
 * @component ImageTransition
 * @description Image 组件过渡动画效果示例
 */
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Image
  src={getExampleImage({ width: 320, height: 180, randomSeed: 6 })}
  alt="过渡动画图片"
  transition="fade"
  hover="brightness"
  width={320}
  height={180}
/>