Image 图片

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

基础用法

占位内容

加载失败

懒加载

TIP

浏览器原生支持的 loading属性在 2.2.3版本加入。 您可以使用 loading="lazy" 替换之前的lazy= true

如果当前浏览器支持原生图片延迟加载,则先使用原生能力,否则将使用滚动监听实现相同效果。

图片预览

图像 API

Image 属性

参数说明类型默认值
src图片源地址,同原生属性一致string
fit确定图片如何适应容器框,同原生 object-fit'fill' | 'contain' | 'cover' | 'none' | 'scale'-down'
hide-on-click-modal当开启 preview 功能时,是否可以通过点击遮罩层关闭 previewbooleanfalse
loading 2.2.3浏览器加载图像的策略,和 浏览器原生能力一致'eager' | 'lazy'
lazy是否使用懒加载booleanfalse
scroll-container开启懒加载功能后,监听 scroll 事件的容器string | HTMLElement最近一个 overflow 值为 auto 或 scroll 的父元素
alt原生属性 altstring
referrer-policy原生属性 referrerPolicystring
preview-src-list开启图片预览功能string[]
z-index设置图片预览的 z-indexnumber
initial-index初始预览图像索引,小于 url-list 的长度number0
close-on-press-escape是否可以通过按下 ESC 关闭 Image Viewerbooleantrue
preview-teleportedimage-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 truebooleanfalse

Image 事件

事件名说明类型
load图片加载成功触发(e: Event) => void
error图片加载失败触发(e: Error) => void
switch切换图像时触发。(index: number) => void
close当点击 X 按钮或者在hide-on-click-modal为 true 时点击遮罩层时触发() => void

Image 插槽

插槽名说明
placeholder当图像尚未加载时,自定义的占位符内容
error自定义图像加载失败的内容
viewer图片描述内容

Image Viewer API

ImageViewer 属性

名称说明类型默认值
url-list用于预览的图片链接列表string[][]
z-index预览时遮罩层的 z-indexnumber | string
initial-index初始预览图像索引,小于 url-list 的长度number0
infinite是否可以无限循环预览booleantrue
hide-on-click-modal是否可以通过点击遮罩层关闭预览booleanfalse
teleportedimage 自身是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 truebooleanfalse

ImageViewer 事件

事件名说明类型
close当点击 X 按钮或者在hide-on-click-modal为 true 时点击遮罩层时触发() => void
switch切换图像时触发。(index: number) => void

源代码

组件文档

贡献者