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.
alt
Alternative text for the image, used for accessibility and display when image loading fails.
---
/**
* @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
Border style of the image, supporting various border thicknesses.
---
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
Custom CSS class name for overriding default styles.
---
/**
* @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
Height of the image in pixels.
---
/**
* @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
Hover effects for the image, supporting scale, brightness adjustment, and blur effects.
---
/**
* @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
Whether to enable lazy loading for the image, defaults to 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
Loading method for the image, supporting lazy and 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
Type of loading indicator, supporting pulse, spinner, progress bar, and skeleton screen.
---
/**
* @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
Mask shape of the image, supporting various geometric shapes.
---
/**
* @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
Model information, displayed in the info panel at the top-right corner of the image.
🎨
🎨
---
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
Fill mode of the image, controlling how the image adapts to the container.
---
/**
* @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
Position of the image, controlling the alignment of the image within the container.
---
/**
* @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
Generation prompt, displayed in the info panel at the top-right corner of the image.
🎨
🎨
---
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
Border radius size of the image, providing multiple rounded corner options.
---
/**
* @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
Shadow effects for the image, enhancing visual hierarchy.
---
/**
* @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
Whether to show error image when loading fails, defaults to 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
Whether to show placeholder during loading, defaults to 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
Image source, can be a local image or remote 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
Transition animation effects for the image, supporting fade, slide, and zoom.
---
/**
* @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
Width of the image in pixels.
---
/**
* @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}
/>