Image 图片

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

用于显示图片的组件,支持多种适配模式、位置、尺寸以及边框和圆角配置。

基础用法

通过 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:保持原始尺寸。