Image 图片

图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等。

基础用法

可通过 fit 确定图片如何适应到容器框，同原生 object-fit。

占位内容

可通过 slot = placeholder 可自定义占位内容

加载失败

可通过 slot = error 可自定义加载失败内容

懒加载

可通过 lazy 开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 scroll-container 来指定滚动容器。

图片预览

可通过 previewSrcList 开启预览大图的功能。

API

Attributes

参数	说明	类型	可选值	默认值
src	图片源，同原生	string	—	-
fit	确定图片如何适应容器框，同原生 object-fit	string	fill / contain / cover / none / scale-down	-
alt	原生 alt	string	-	-
lazy	是否开启懒加载	boolean	—	false
scroll-container	懒加载的滚动容器	string / HTMLElement	—	-
preview-src-list	开启图片预览功能	array	—	-
z-index	设置图片预览的 z-index	number	—	2000
initial-index	图片预览初始索引	number	—	0

Events

事件名	说明	回调参数
load	图片加载成功触发	(e: Event)
error	图片加载失败触发	(e: Event)
switch	切换图片触发	(index: number)
close	关闭图片预览触发	-

Slots

插槽名	说明
placeholder	图片未加载的占位内容
error	加载失败的内容

快捷键操作

按键	说明
Esc	关闭预览
← / →	切换图片
↑ / ↓	放大/缩小图片
Space	切换显示模式 (原始/适应)