Image 图片

图片加载中

基础图片

不同填充模式的图片

提供 fill、contain、cover、none、scale-down 5 种填充类型。

图片加载中

fill

图片加载中

contain

图片加载中

cover

图片加载中

none

图片加载中

scale-down

不同填充位置的图片

图片相对于容器的位置。当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

图片加载中

cover center

图片加载中

cover left

图片加载中

cover right

图片加载中

cover top

图片加载中

cover bottom

图片加载中

contain top

图片加载中

contain bottom

图片加载中

contain center

图片加载中

contain left

图片加载中

contain right

不同形状的图片

提供方形、圆角方形、圆角 3 种形状。

当图片长宽不相等时，无法使用 circle 展示一个正圆。

图片加载中

square

图片加载中

round

图片加载中

circle

图集样式的图片

图片呈现图集样式的效果。

图片加载中

标签一

加载状态的图片

显示加载的不同状态，提供默认、自定义两种占位样式。

加载中的图片

默认占位

图片加载中

自定义占位

加载失败的图片

默认错误

图片无法显示

自定义错误

图片懒加载

单图用法

placeholder 在图像加载时占位显示。

图片列表用法

多张图片滚动下拉时，尚未出现的图片会用占位图表示，呈现懒加载的效果。

图片扩展元素

带有悬浮层的图片。

始终显示

悬浮层常驻显示，不因用户操作出现或消失。

有遮罩

图片加载中

高清

无遮罩

图片加载中

高清

悬浮显示

默认不显示悬浮层，鼠标悬浮到图片区域后悬浮层出现。

图片加载中

预览

支持 `avif` 和 `webp` 格式的图片

支持使用 srcset 设置特殊格式的图片渲染，如 .avif 和 .webp。图片转码为 AVIF/WEBP 推荐使用腾讯云数据万象图片压缩服务。

图片加载中

.avif / .webp

Image Props

名称	类型	默认值	说明	必传
alt	String	-	图片描述	N
error	String / Slot / Function	-	自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。通用类型定义	N
fallback	String	-	图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`	N
fit	String	fill	图片填充模式。可选项：contain/cover/fill/none/scale-down	N
gallery	Boolean	false	是否展示为图集样式	N
lazy	Boolean	false	是否开启图片懒加载	N
loading	String / Slot / Function	-	自定义加载中状态的图片内容，如：“加载中”。TS 类型：`string \| TNode`。通用类型定义	N
overlayContent	String / Slot / Function	-	图片上方的浮层内容。TS 类型：`string \| TNode`。通用类型定义	N
overlayTrigger	String	always	浮层 `overlayContent` 出现的时机。可选项：always/hover	N
placeholder	String / Slot / Function	-	占位元素，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图片地址。TS 类型：`string \| TNode`。通用类型定义	N
position	String	center	等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者百分比	N
referrerpolicy	String	-	`<img>` 标签的原生属性，MDN 定义。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url	N
shape	String	square	图片圆角类型。可选项：circle/round/square	N
src	String / File	-	用于显示图片的链接或原始图片文件对象。TS 类型：`string \| File`	N
srcset	Object	-	图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址。TS 类型：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。详细类型定义	N
onError	Function		TS 类型：`(context: { e: ImageEvent }) => void` 图片加载失败时触发	N
onLoad	Function		TS 类型：`(context: { e: ImageEvent }) => void` 图片加载完成时触发	N

Image Events

名称	参数	描述
error	`(context: { e: ImageEvent })`	图片加载失败时触发
load	`(context: { e: ImageEvent })`	图片加载完成时触发

组件名	何时使用
图片	当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时。
图片预览	当需要对已展示的图片，进行快速查看、或进行具有放大、缩小等操作的浏览行为时。

Image 图片