产品动态
产品公告
Image 图片
组件功能
用于显示图片的组件，支持多种适配模式、位置、尺寸以及边框和圆角配置。
基础用法
通过 src 指定图片 URL，fit 控制适配模式，alt 提供替代文本。
Template 示例：
<Imagesrc="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：保持原始尺寸。
文档反馈