腾讯云智能体开发平台 Image 图片

这篇说说腾讯云图片组件的功能,支持多种适配模式、位置、尺寸及边框圆角配置,通过src指定URL、fit控制适配模式,并提供详细属性说明。 适配模式:cover裁剪填充、contain完整显示、fill拉伸、scale-down取较小、none保持原尺寸。 位置控制:ImagePosition类型支持九宫格定位,默认居中。 尺寸属性:支持单独或同时设置宽高、最小/最大尺寸、宽高比及圆角。

相关产品
腾讯云智能体开发平台 产品页,含版本规格、价格与购买入口。

一、组件功能

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

二、基础用法

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

赞 (0)
上一篇 4天前
下一篇 4天前