logo
English
导航

Image

The Image component is an enhanced image component that provides rich features including lazy loading, loading state indicators, error handling, and various visual effects.

Basic Usage

示例图片 
---
/**
 * @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}
/>

Rounded Corners and Shadow Effects

圆角阴影图片 
---
/**
 * @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}
/>

Hover Interaction Effects

悬停交互图片 
---
/**
 * @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}
/>

Loading Indicator (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}
/>

Loading Indicator (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 Fill Mode

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}
/>

Transition Animation Effects

过渡动画图片 
---
/**
 * @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}
/>