组件功能
用于显示图片的组件，支持多种适配模式、位置、尺寸以及边框和圆角配置。
基础用法
通过 src 指定图片 URL，fit 控制适配模式，alt 提供替代文本。
Template 示例：
<Image
src="https://picsum.photos/id/237/400/400"
alt="示例图片"
fit="cover"
/>
效果展示如下：
属性说明
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| src ★ | string |
图片 URL | - |
| alt | string |
图片替代文本 | - |
| frame | boolean |
是否显示边框 | false |
| fit | "cover" | "contain" | "fill" | "scale-down" | "none" |
图片适配模式 | "cover" |
| position | ImagePosition |
图片位置 | "center" |
| flush | boolean |
是否贴边显示 | false |
尺寸属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| height | number | string |
高度 | - |
| width | number | string |
宽度 | - |
| size | number | string |
同时设置宽高 | - |
| minHeight | number | string |
最小高度 | - |
| minWidth | number | string |
最小宽度 | - |
| minSize | number | string |
最小尺寸 | - |
| maxHeight | number | string |
最大高度 | - |
| maxWidth | number | string |
最大宽度 | - |
| maxSize | number | string |
最大尺寸 | - |
| aspectRatio | number | string |
宽高比 | - |
| radius | RadiusValue |
圆角 | - |
| margin | number | string | Spacing |
外边距 | - |
注意：
★ 标记为必填属性。
ImagePosition 类型
用于控制图片再容器中的显示位置，可选值：
-
"top left"- 左上 -
"top"- 上中 -
"top right"- 右上 -
"left"- 左中 -
"center"- 居中 -
"right"- 右中 -
"bottom left"- 左下 -
"bottom"- 下中 -
"bottom right"- 右下
适配模式说明
-
cover：保持比例,裁剪以填充整个容器。
-
contain：保持比例,完整显示图片。
-
fill：拉伸图片以填充容器。
-
scale-down：选择 none 或 contain 中较小的一个。
-
none：保持原始尺寸。