astro
image
Image
Introduction
The Image component is an intelligent image component that automatically selects the appropriate processing method based on the image source type.
Loading Strategy Tips
- Prefer
loading="lazy"for non-critical images to reduce first-screen bandwidth usage. These images will still load after the page becomes visible. - Use
loading="eager"only for above-the-fold, user-critical images. It may occupy bandwidth and defer the windowloadevent (Safari may keep the Stop button longer). - Provide explicit
width/height(or a fixed container size) to avoid layout shifts. When usinglayout="fill", ensure the outer container has a deterministic size.
Examples
Props
alt
Alternative text for the image, used for accessibility and display when image loading fails.
---
/**
* @component ImageError
* @description 展示正常加载的图片
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小圆角浅阴影示例"
width={200}
height={150}
rounded="sm"
shadow="sm"
/>
---
/**
* @component ImageRoundedShadowLarge
* @description 展示大圆角深阴影效果
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 100 })}
alt="小尺寸高度示例"
width={200}
height={100}
/>
---
/**
* @component ImageHeightMedium
* @description 展示中等尺寸高度的图片
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="中等尺寸高度示例"
width={200}
height={200}
/>
---
/**
* @component ImageHeightLarge
* @description 展示大尺寸高度的图片
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无悬停效果示例"
width={200}
height={150}
hover="none"
/>
---
/**
* @component ImageHoverScaleOnly
* @description 展示缩放悬停效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="缩放悬停效果示例"
width={200}
height={150}
hover="scale"
/>
---
/**
* @component ImageHoverBrightness
* @description 展示亮度调整悬停效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="亮度调整悬停效果示例"
width={200}
height={150}
hover="brightness"
/>
---
/**
* @component ImageHoverBlur
* @description 展示模糊悬停效果
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="懒加载示例"
width={200}
height={150}
lazy={true}
/>
---
/**
* @component ImageLazyFalse
* @description 展示 lazy=false 的图片加载
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="懒加载示例"
width={200}
height={150}
loading="lazy"
/>
---
/**
* @component ImageLoadingEager
* @description 展示 loading="eager" 的图片加载
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="脉冲加载指示器示例"
width={200}
height={150}
loadingIndicator="pulse"
/>
---
/**
* @component ImageLoadingIndicatorSpinner
* @description Image 组件加载指示器 spinner 示例
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="圆形遮罩图片"
width={200}
height={200}
mask="circle"
/>
---
/**
* @component ImageMaskDecagon
* @description Image 组件十边形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="十边形遮罩图片"
width={200}
height={200}
mask="decagon"
/>
---
/**
* @component ImageMaskDiamond
* @description Image 组件菱形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="菱形遮罩图片"
width={200}
height={200}
mask="diamond"
/>
---
/**
* @component ImageMaskHeart
* @description Image 组件心形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="心形遮罩图片"
width={200}
height={200}
mask="heart"
/>
---
/**
* @component ImageMaskHexagon
* @description Image 组件六边形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="六边形遮罩图片"
width={200}
height={200}
mask="hexagon"
/>
---
/**
* @component ImageMaskHexagon2
* @description Image 组件水平六边形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="水平六边形遮罩图片"
width={200}
height={200}
mask="hexagon-2"
/>
---
/**
* @component ImageMaskNone
* @description Image 组件无遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="无遮罩图片"
width={200}
height={200}
mask="none"
/>
---
/**
* @component ImageMaskPentagon
* @description Image 组件五边形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="五边形遮罩图片"
width={200}
height={200}
mask="pentagon"
/>
---
/**
* @component ImageMaskSquare
* @description Image 组件正方形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="正方形遮罩图片"
width={200}
height={200}
mask="square"
/>
---
/**
* @component ImageMaskSquircle
* @description Image 组件圆角方形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="圆角方形遮罩图片"
width={200}
height={200}
mask="squircle"
/>
---
/**
* @component ImageMaskStar
* @description Image 组件星形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="星形遮罩图片"
width={200}
height={200}
mask="star"
/>
---
/**
* @component ImageMaskStar2
* @description Image 组件粗体星形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="粗体星形遮罩图片"
width={200}
height={200}
mask="star-2"
/>
---
/**
* @component ImageMaskTriangle
* @description Image 组件向上三角形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向上三角形遮罩图片"
width={200}
height={200}
mask="triangle"
/>
---
/**
* @component ImageMaskTriangle2
* @description Image 组件向下三角形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向下三角形遮罩图片"
width={200}
height={200}
mask="triangle-2"
/>
---
/**
* @component ImageMaskTriangle3
* @description Image 组件向左三角形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向左三角形遮罩图片"
width={200}
height={200}
mask="triangle-3"
/>
---
/**
* @component ImageMaskTriangle4
* @description Image 组件向右三角形遮罩示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 200 })}
alt="向右三角形遮罩图片"
width={200}
height={200}
mask="triangle-4"
/>
objectFit
Fill mode of the image, controlling how the image adapts to the container.
---
/**
* @component ImageObjectFitContain
* @description 展示 objectFit="contain" 的效果
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="居中定位示例"
width={200}
height={150}
objectPosition="center"
/>
---
/**
* @component ImageObjectPositionTop
* @description 展示 objectPosition="top" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="顶部定位示例"
width={200}
height={150}
objectPosition="top"
/>
---
/**
* @component ImageObjectPositionBottom
* @description 展示 objectPosition="bottom" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="底部定位示例"
width={200}
height={150}
objectPosition="bottom"
/>
---
/**
* @component ImageObjectPositionLeft
* @description 展示 objectPosition="left" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="左侧定位示例"
width={200}
height={150}
objectPosition="left"
/>
---
/**
* @component ImageObjectPositionRight
* @description 展示 objectPosition="right" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="右侧定位示例"
width={200}
height={150}
objectPosition="right"
/>
rounded
Border radius size of the image, providing multiple rounded corner options.
---
/**
* @component ImageRoundedNone
* @description 展示 rounded="none" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无圆角示例"
width={200}
height={150}
rounded="none"
/>
---
/**
* @component ImageRoundedSmall
* @description 展示 rounded="sm" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小圆角示例"
width={200}
height={150}
rounded="sm"
/>
---
/**
* @component ImageRoundedMedium
* @description 展示 rounded="md" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等圆角示例"
width={200}
height={150}
rounded="md"
/>
---
/**
* @component ImageRoundedLarge
* @description 展示 rounded="lg" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="大圆角示例"
width={200}
height={150}
rounded="lg"
/>
---
/**
* @component ImageRoundedXl
* @description 展示 rounded="xl" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="超大圆角示例"
width={200}
height={150}
rounded="xl"
/>
---
/**
* @component ImageRounded2xl
* @description 展示 rounded="2xl" 的效果
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="无阴影示例"
width={200}
height={150}
shadow="none"
/>
---
/**
* @component ImageShadowSmall
* @description 展示 shadow="sm" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="小阴影示例"
width={200}
height={150}
shadow="sm"
/>
---
/**
* @component ImageShadowMedium
* @description 展示 shadow="md" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等阴影示例"
width={200}
height={150}
shadow="md"
/>
---
/**
* @component ImageShadowLarge
* @description 展示 shadow="lg" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="大阴影示例"
width={200}
height={150}
shadow="lg"
/>
---
/**
* @component ImageShadowXl
* @description 展示 shadow="xl" 的效果
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="超大阴影示例"
width={200}
height={150}
shadow="xl"
/>
---
/**
* @component ImageShadow2xl
* @description 展示 shadow="2xl" 的效果
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="显示占位符示例"
width={200}
height={150}
showPlaceholder={true}
/>
---
/**
* @component ImageShowPlaceholderFalse
* @description 展示 showPlaceholder={false} 的效果
*/
import { getExampleImage, Image } 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";
import LocalImage from "@/assets/book.png";
---
<Image src={LocalImage} alt="本地 SVG 图片" width={200} height={100} />
---
/**
* @component ImageSrcRemote
* @description Image 组件远程 URL 用法示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 200 })}
alt="远程图片"
width={300}
height={200}
/>
---
/**
* @component ImageSrcDynamic
* @description Image 组件动态生成图片用法示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 250, height: 150 })}
alt="动态生成的示例图片"
width={250}
height={150}
/>
tooltip
Tooltip text for the image, displayed when hovering over the image.
---
/**
* @component ImageTooltipBasic
* @description Image 组件基本提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="带提示框的图片"
width={200}
height={120}
tooltip="这是一张美丽的图片"
/>
---
/**
* @component ImageTooltipTop
* @description Image 组件顶部提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="顶部提示框图片"
width={200}
height={120}
tooltip="顶部提示框"
tooltipPlacement="top"
/>
---
/**
* @component ImageTooltipBottom
* @description Image 组件底部提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="底部提示框图片"
width={200}
height={120}
tooltip="底部提示框"
tooltipPlacement="bottom"
/>
---
/**
* @component ImageTooltipLeft
* @description Image 组件左侧提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="左侧提示框图片"
width={200}
height={120}
tooltip="左侧提示框"
tooltipPlacement="left"
/>
---
/**
* @component ImageTooltipRight
* @description Image 组件右侧提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="右侧提示框图片"
width={200}
height={120}
tooltip="右侧提示框"
tooltipPlacement="right"
/>
---
/**
* @component ImageTooltipPrimary
* @description Image 组件主要色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="主要色提示框图片"
width={200}
height={120}
tooltip="主要色提示框"
tooltipColor="primary"
/>
---
/**
* @component ImageTooltipSuccess
* @description Image 组件成功色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="成功色提示框图片"
width={200}
height={120}
tooltip="成功色提示框"
tooltipColor="success"
/>
---
/**
* @component ImageTooltipWarning
* @description Image 组件警告色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="警告色提示框图片"
width={200}
height={120}
tooltip="警告色提示框"
tooltipColor="warning"
/>
---
/**
* @component ImageTooltipError
* @description Image 组件错误色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="错误色提示框图片"
width={200}
height={120}
tooltip="错误色提示框"
tooltipColor="error"
/>
---
/**
* @component ImageTooltipOpen
* @description Image 组件强制显示提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="强制显示提示框图片"
width={200}
height={120}
tooltip="强制显示的提示框"
tooltipOpen={true}
/>
tooltipColor
Color theme of the tooltip.
---
/**
* @component ImageTooltipPrimary
* @description Image 组件主要色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="主要色提示框图片"
width={200}
height={120}
tooltip="主要色提示框"
tooltipColor="primary"
/>
---
/**
* @component ImageTooltipSuccess
* @description Image 组件成功色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="成功色提示框图片"
width={200}
height={120}
tooltip="成功色提示框"
tooltipColor="success"
/>
---
/**
* @component ImageTooltipWarning
* @description Image 组件警告色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="警告色提示框图片"
width={200}
height={120}
tooltip="警告色提示框"
tooltipColor="warning"
/>
---
/**
* @component ImageTooltipError
* @description Image 组件错误色提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="错误色提示框图片"
width={200}
height={120}
tooltip="错误色提示框"
tooltipColor="error"
/>
tooltipOpen
Whether to force show the tooltip, defaults to false.
---
/**
* @component ImageTooltipBasic
* @description Image 组件基本提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="带提示框的图片"
width={200}
height={120}
tooltip="这是一张美丽的图片"
/>
---
/**
* @component ImageTooltipOpen
* @description Image 组件强制显示提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="强制显示提示框图片"
width={200}
height={120}
tooltip="强制显示的提示框"
tooltipOpen={true}
/>
tooltipPlacement
Position of the tooltip, defaults to top.
---
/**
* @component ImageTooltipTop
* @description Image 组件顶部提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="顶部提示框图片"
width={200}
height={120}
tooltip="顶部提示框"
tooltipPlacement="top"
/>
---
/**
* @component ImageTooltipBottom
* @description Image 组件底部提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="底部提示框图片"
width={200}
height={120}
tooltip="底部提示框"
tooltipPlacement="bottom"
/>
---
/**
* @component ImageTooltipLeft
* @description Image 组件左侧提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="左侧提示框图片"
width={200}
height={120}
tooltip="左侧提示框"
tooltipPlacement="left"
/>
---
/**
* @component ImageTooltipRight
* @description Image 组件右侧提示框示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="右侧提示框图片"
width={200}
height={120}
tooltip="右侧提示框"
tooltipPlacement="right"
/>
transition
Transition animation effects for the image, supporting fade, slide, and zoom.
---
/**
* @component ImageTransitionNone
* @description Image 组件无过渡效果示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="无过渡效果的图片"
width={200}
height={120}
transition="none"
/>
---
/**
* @component ImageTransitionFade
* @description Image 组件淡入过渡效果示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="淡入过渡效果的图片"
width={200}
height={120}
transition="fade"
/>
---
/**
* @component ImageTransitionSlide
* @description Image 组件滑动过渡效果示例
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 120 })}
alt="滑动过渡效果的图片"
width={200}
height={120}
transition="slide"
/>
---
/**
* @component ImageTransitionZoom
* @description Image 组件缩放过渡效果示例
*/
import { getExampleImage, Image } 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 { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 100, height: 150 })}
alt="小尺寸宽度示例"
width={100}
height={150}
/>
---
/**
* @component ImageWidthMedium
* @description 展示中等尺寸宽度的图片
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 200, height: 150 })}
alt="中等尺寸宽度示例"
width={200}
height={150}
/>
---
/**
* @component ImageWidthLarge
* @description 展示大尺寸宽度的图片
*/
import { getExampleImage, Image } from "@coffic/cosy-ui";
---
<Image
src={getExampleImage({ width: 300, height: 150 })}
alt="大尺寸宽度示例"
width={300}
height={150}
/>