Image
image图片 · 加载淡入 + 失败回退/占位 + isZoomed hover 放大 + radius
用法
基础用法
传入 src/alt 与 width/height 固定外壳尺寸，加载完成后淡入。
tsx
<Image src="/photo.jpg" alt="风景" width={200} height={130} />圆角
radius 提供 none / sm / md / lg / full 五档刻度。
tsx
<>
<Image src="/photo.jpg" alt="风景" width={120} height={90} radius="sm" />
<Image src="/photo.jpg" alt="风景" width={120} height={90} radius="lg" />
<Image src="/avatar.jpg" alt="头像" width={90} height={90} radius="full" />
</>hover 放大（isZoomed）
isZoomed 时外壳裁切溢出，鼠标移上图片放大。
tsx
<Image src="/photo.jpg" alt="风景" width={200} height={130} isZoomed />加载失败回退
原图加载失败时切到 fallbackSrc；回退也失败则显示占位底。
tsx
<Image
src="https://invalid.example/none.png"
fallbackSrc="/photo.jpg"
alt="回退"
width={200}
height={130}
/>何时用
替代原生 <img> 展示需要加载淡入、失败回退占位、圆角、hover 放大的图片（封面、头像、内容图）。只是装饰性 logo 滚动墙用 Marquee；要全屏看大图/缩放预览用 ImageViewer。
导入
ts
import { Image, imageVariants } from "@hulianui/ui"Props
继承 Omit<ImgHTMLAttributes<HTMLImageElement>, "width" | "height">。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| src * | string | — | 图片地址 |
| alt | string | — | 替代文本 |
| width | number ｜ string | — | 宽（数字或 CSS 长度） |
| height | number ｜ string | — | 高（数字或 CSS 长度） |
| radius | "none"｜"sm"｜"md"｜"lg"｜"full" | "md" | 圆角刻度 |
| isZoomed | boolean | false | hover 放大（外壳裁切溢出） |
| fallbackSrc | string | — | 加载失败时回退图；缺省则显示占位底 |
| className | string | — | 外壳 className（控制尺寸/圆角区域） |
| imgClassName | string | — | <img> 自身 className |
| ...img | Omit\<ImgHTMLAttributes, "width"｜"height"\> | — | 透传其余原生 img 属性 |
禁忌 / 坑
isZoomed的放大效果靠外壳overflow裁切，外壳尺寸由width/height/className决定——别给<img>（imgClassName）单独设溢出。- 圆角分两层：
radius作用于外壳；要单独调<img>走imgClassName。radius="full"配等宽高做圆形头像。 - 候选坑 skill（
dark-image-page-bg-seam-converge-same-color/image-enhancer等）均为业务/工具场景，与本组件无关，不引用。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Image
src="/photo.jpg"
alt="风景"
width={220}
height={140}
/>