一、组件功能
用于显示图片的组件,支持多种适配模式、位置、尺寸以及边框和圆角配置。
二、基础用法
通过 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:保持原始尺寸。