Image
Image 组件是一个增强的图片组件，提供了丰富的功能，包括懒加载、加载状态指示、错误处理、以及各种视觉效果。
alt
图片的替代文本，用于无障碍访问和图片加载失败时的显示。
---
/**
* @component ImageError
* @description 展示正常加载的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="这是一张正常加载的图片"
width={200}
height={150}
/>
---
/**
* @component ImageErrorSimple
* @description 展示加载失败的图片，显示替代文本
*/
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://invalid-url-example.com/image.jpg"
alt="图片加载失败时的替代文本"
width={200}
height={150}
/>
border
图片的边框样式，支持多种边框粗细。
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="无边框图片"
border="none"
width={300}
height={200}
/>
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="小边框图片"
border="sm"
width={300}
height={200}
/>
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="中等边框图片"
border="md"
width={300}
height={200}
/>
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="大边框图片"
border="lg"
width={300}
height={200}
/>
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="超大边框图片"
border="xl"
width={300}
height={200}
/>
class
自定义 CSS 类名，用于覆盖默认样式。
---
/**
* @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 ImageRoundedShadowSmall
* @description 展示小圆角浅阴影效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小圆角浅阴影示例"
width={200}
height={150}
rounded="sm"
shadow="sm"
/>
---
/**
* @component ImageRoundedShadowLarge
* @description 展示大圆角深阴影效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="大圆角深阴影示例"
width={200}
height={150}
rounded="lg"
shadow="lg"
/>
height
图片的高度，单位为像素。
---
/**
* @component ImageHeightSmall
* @description 展示小尺寸高度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 100 })}
alt="小尺寸高度示例"
width={200}
height={100}
/>
---
/**
* @component ImageHeightMedium
* @description 展示中等尺寸高度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="中等尺寸高度示例"
width={200}
height={200}
/>
---
/**
* @component ImageHeightLarge
* @description 展示大尺寸高度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 300 })}
alt="大尺寸高度示例"
width={200}
height={300}
/>
hover
图片的悬停效果，支持缩放、亮度调整和模糊效果。
---
/**
* @component ImageHoverNone
* @description 展示无悬停效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无悬停效果示例"
width={200}
height={150}
hover="none"
/>
---
/**
* @component ImageHoverScaleOnly
* @description 展示缩放悬停效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="缩放悬停效果示例"
width={200}
height={150}
hover="scale"
/>
---
/**
* @component ImageHoverBrightness
* @description 展示亮度调整悬停效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="亮度调整悬停效果示例"
width={200}
height={150}
hover="brightness"
/>
---
/**
* @component ImageHoverBlur
* @description 展示模糊悬停效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="模糊悬停效果示例"
width={200}
height={150}
hover="blur"
/>
lazy
是否启用图片懒加载，默认为 true。
---
/**
* @component ImageLazyTrue
* @description 展示 lazy=true 的图片加载
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="懒加载示例"
width={200}
height={150}
lazy={true}
/>
---
/**
* @component ImageLazyFalse
* @description 展示 lazy=false 的图片加载
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="立即加载示例"
width={200}
height={150}
lazy={false}
/>
loading
图片的加载方式，支持 lazy 和 eager。
---
/**
* @component ImageLoadingLazy
* @description 展示 loading="lazy" 的图片加载
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="懒加载示例"
width={200}
height={150}
loading="lazy"
/>
---
/**
* @component ImageLoadingEager
* @description 展示 loading="eager" 的图片加载
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="立即加载示例"
width={200}
height={150}
loading="eager"
/>
loadingIndicator
加载指示器类型，支持脉冲、旋转器、进度条和骨架屏。
---
/**
* @component ImageLoadingIndicatorPulse
* @description 展示 pulse 加载指示器
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="脉冲加载指示器示例"
width={200}
height={150}
loadingIndicator="pulse"
/>
---
/**
* @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}
/>
---
/**
* @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}
/>
---
/**
* @component ImageLoadingIndicatorSkeleton
* @description 展示 skeleton 加载指示器
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="骨架屏加载指示器示例"
width={200}
height={150}
loadingIndicator="skeleton"
/>
mask
图片的遮罩形状，支持多种几何形状。
---
/**
* @component ImageMaskCircle
* @description Image 组件圆形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="圆形遮罩图片"
width={200}
height={200}
mask="circle"
/>
---
/**
* @component ImageMaskDecagon
* @description Image 组件十边形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="十边形遮罩图片"
width={200}
height={200}
mask="decagon"
/>
---
/**
* @component ImageMaskDiamond
* @description Image 组件菱形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="菱形遮罩图片"
width={200}
height={200}
mask="diamond"
/>
---
/**
* @component ImageMaskHeart
* @description Image 组件心形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="心形遮罩图片"
width={200}
height={200}
mask="heart"
/>
---
/**
* @component ImageMaskHexagon
* @description Image 组件六边形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="六边形遮罩图片"
width={200}
height={200}
mask="hexagon"
/>
---
/**
* @component ImageMaskHexagon2
* @description Image 组件水平六边形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="水平六边形遮罩图片"
width={200}
height={200}
mask="hexagon-2"
/>
---
/**
* @component ImageMaskNone
* @description Image 组件无遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="无遮罩图片"
width={200}
height={200}
mask="none"
/>
---
/**
* @component ImageMaskPentagon
* @description Image 组件五边形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="五边形遮罩图片"
width={200}
height={200}
mask="pentagon"
/>
---
/**
* @component ImageMaskSquare
* @description Image 组件正方形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="正方形遮罩图片"
width={200}
height={200}
mask="square"
/>
---
/**
* @component ImageMaskSquircle
* @description Image 组件圆角方形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="圆角方形遮罩图片"
width={200}
height={200}
mask="squircle"
/>
---
/**
* @component ImageMaskStar
* @description Image 组件星形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="星形遮罩图片"
width={200}
height={200}
mask="star"
/>
---
/**
* @component ImageMaskStar2
* @description Image 组件粗体星形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="粗体星形遮罩图片"
width={200}
height={200}
mask="star-2"
/>
---
/**
* @component ImageMaskTriangle
* @description Image 组件向上三角形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向上三角形遮罩图片"
width={200}
height={200}
mask="triangle"
/>
---
/**
* @component ImageMaskTriangle2
* @description Image 组件向下三角形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向下三角形遮罩图片"
width={200}
height={200}
mask="triangle-2"
/>
---
/**
* @component ImageMaskTriangle3
* @description Image 组件向左三角形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向左三角形遮罩图片"
width={200}
height={200}
mask="triangle-3"
/>
---
/**
* @component ImageMaskTriangle4
* @description Image 组件向右三角形遮罩示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向右三角形遮罩图片"
width={200}
height={200}
mask="triangle-4"
/>
model
使用模型信息，显示在图片右上角的信息面板中。
🎨
🎨
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="带模型信息的图片"
model="Stable Diffusion XL"
width={300}
height={200}
/>
🎨
🎨
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="带提示词和模型信息的图片"
prompt="一只可爱的小猫坐在花园里，阳光明媚，背景模糊"
model="Stable Diffusion XL"
width={300}
height={200}
/>
objectFit
图片的填充方式，控制图片如何适应容器。
---
/**
* @component ImageObjectFitContain
* @description 展示 objectFit="contain" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="contain 填充方式示例"
width={200}
height={150}
objectFit="contain"
/>
---
/**
* @component ImageObjectFitCover
* @description 展示 objectFit="cover" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="cover 填充方式示例"
width={200}
height={150}
objectFit="cover"
/>
---
/**
* @component ImageObjectFitFill
* @description 展示 objectFit="fill" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="fill 填充方式示例"
width={200}
height={150}
objectFit="fill"
/>
---
/**
* @component ImageObjectFitNone
* @description 展示 objectFit="none" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="none 填充方式示例"
width={200}
height={150}
objectFit="none"
/>
---
/**
* @component ImageObjectFitScaleDown
* @description 展示 objectFit="scale-down" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="scale-down 填充方式示例"
width={200}
height={150}
objectFit="scale-down"
/>
objectPosition
图片的位置，控制图片在容器中的对齐方式。
---
/**
* @component ImageObjectPositionCenter
* @description 展示 objectPosition="center" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="居中定位示例"
width={200}
height={150}
objectPosition="center"
/>
---
/**
* @component ImageObjectPositionTop
* @description 展示 objectPosition="top" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="顶部定位示例"
width={200}
height={150}
objectPosition="top"
/>
---
/**
* @component ImageObjectPositionBottom
* @description 展示 objectPosition="bottom" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="底部定位示例"
width={200}
height={150}
objectPosition="bottom"
/>
---
/**
* @component ImageObjectPositionLeft
* @description 展示 objectPosition="left" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="左侧定位示例"
width={200}
height={150}
objectPosition="left"
/>
---
/**
* @component ImageObjectPositionRight
* @description 展示 objectPosition="right" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="右侧定位示例"
width={200}
height={150}
objectPosition="right"
/>
prompt
生成提示词，显示在图片右上角的信息面板中。
🎨
🎨
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="带提示词的图片"
prompt="一只可爱的小猫坐在花园里，阳光明媚，背景模糊"
width={300}
height={200}
/>
🎨
🎨
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="带提示词和模型信息的图片"
prompt="一只可爱的小猫坐在花园里，阳光明媚，背景模糊"
model="Stable Diffusion XL"
width={300}
height={200}
/>
🎨
🎨
---
import { Image } from '@coffic/cosy-ui';
---
<Image
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
alt="不显示生成信息面板"
prompt="一只可爱的小猫坐在花园里，阳光明媚，背景模糊"
model="Stable Diffusion XL"
showPromptPanel={false}
width={300}
height={200}
/>
rounded
图片的圆角大小，提供多种圆角选项。
---
/**
* @component ImageRoundedNone
* @description 展示 rounded="none" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无圆角示例"
width={200}
height={150}
rounded="none"
/>
---
/**
* @component ImageRoundedSmall
* @description 展示 rounded="sm" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小圆角示例"
width={200}
height={150}
rounded="sm"
/>
---
/**
* @component ImageRoundedMedium
* @description 展示 rounded="md" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等圆角示例"
width={200}
height={150}
rounded="md"
/>
---
/**
* @component ImageRoundedLarge
* @description 展示 rounded="lg" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="大圆角示例"
width={200}
height={150}
rounded="lg"
/>
---
/**
* @component ImageRoundedXl
* @description 展示 rounded="xl" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="超大圆角示例"
width={200}
height={150}
rounded="xl"
/>
---
/**
* @component ImageRounded2xl
* @description 展示 rounded="2xl" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="2xl 圆角示例"
width={200}
height={150}
rounded="2xl"
/>
---
/**
* @component ImageRounded3xl
* @description 展示 rounded="3xl" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="3xl 圆角示例"
width={200}
height={150}
rounded="3xl"
/>
---
/**
* @component ImageRoundedFull
* @description 展示 rounded="full" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="完全圆角示例"
width={200}
height={150}
rounded="full"
/>
shadow
图片的阴影效果，增强视觉层次感。
---
/**
* @component ImageShadowNone
* @description 展示 shadow="none" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无阴影示例"
width={200}
height={150}
shadow="none"
/>
---
/**
* @component ImageShadowSmall
* @description 展示 shadow="sm" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小阴影示例"
width={200}
height={150}
shadow="sm"
/>
---
/**
* @component ImageShadowMedium
* @description 展示 shadow="md" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等阴影示例"
width={200}
height={150}
shadow="md"
/>
---
/**
* @component ImageShadowLarge
* @description 展示 shadow="lg" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="大阴影示例"
width={200}
height={150}
shadow="lg"
/>
---
/**
* @component ImageShadowXl
* @description 展示 shadow="xl" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="超大阴影示例"
width={200}
height={150}
shadow="xl"
/>
---
/**
* @component ImageShadow2xl
* @description 展示 shadow="2xl" 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="2xl 阴影示例"
width={200}
height={150}
shadow="2xl"
/>
showError
是否显示加载失败的错误图，默认为 true。
---
/**
* @component ImageShowErrorTrue
* @description 展示 showError={true} 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src="https://invalid-url-example.com/image.jpg"
alt="显示错误示例"
width={200}
height={150}
showError={true}
/>
---
/**
* @component ImageShowErrorFalse
* @description 展示 showError={false} 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src="https://invalid-url-example.com/image.jpg"
alt="隐藏错误示例"
width={200}
height={150}
showError={false}
/>
showPlaceholder
是否显示加载中的占位图，默认为 true。
---
/**
* @component ImageShowPlaceholderTrue
* @description 展示 showPlaceholder={true} 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="显示占位符示例"
width={200}
height={150}
showPlaceholder={true}
/>
---
/**
* @component ImageShowPlaceholderFalse
* @description 展示 showPlaceholder={false} 的效果
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="隐藏占位符示例"
width={200}
height={150}
showPlaceholder={false}
/>
src
图片源，可以是本地图片或远程URL。
---
/**
* @component ImageSrcLocal
* @description Image 组件本地图片路径用法示例
*/
import { Image } from '@coffic/cosy-ui';
---
<Image
src="/cosy-ui/sample-1.png"
alt="本地 SVG 图片"
width={200}
height={100}
/>
---
/**
* @component ImageSrcRemote
* @description Image 组件远程 URL 用法示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="远程图片"
width={300}
height={200}
/>
---
/**
* @component ImageSrcDynamic
* @description Image 组件动态生成图片用法示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 250, height: 150 })}
alt="动态生成的示例图片"
width={250}
height={150}
/>
transition
图片的过渡动画效果，支持淡入、滑动和缩放。
---
/**
* @component ImageTransitionNone
* @description Image 组件无过渡效果示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="无过渡效果的图片"
width={200}
height={120}
transition="none"
/>
---
/**
* @component ImageTransitionFade
* @description Image 组件淡入过渡效果示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="淡入过渡效果的图片"
width={200}
height={120}
transition="fade"
/>
---
/**
* @component ImageTransitionSlide
* @description Image 组件滑动过渡效果示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="滑动过渡效果的图片"
width={200}
height={120}
transition="slide"
/>
---
/**
* @component ImageTransitionZoom
* @description Image 组件缩放过渡效果示例
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="缩放过渡效果的图片"
width={200}
height={120}
transition="zoom"
/>
width
图片的宽度，单位为像素。
---
/**
* @component ImageWidthSmall
* @description 展示小尺寸宽度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 100, height: 150 })}
alt="小尺寸宽度示例"
width={100}
height={150}
/>
---
/**
* @component ImageWidthMedium
* @description 展示中等尺寸宽度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等尺寸宽度示例"
width={200}
height={150}
/>
---
/**
* @component ImageWidthLarge
* @description 展示大尺寸宽度的图片
*/
import { Image } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---
<Image
src={getExampleImage({ width: 300, height: 150 })}
alt="大尺寸宽度示例"
width={300}
height={150}
/>