Image 图片 V2.2.2
图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等。
代码演示
API
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
src | 图片源,同原生 | string | — | - |
fit | 确定图片如何适应容器框,同原生 object-fit | string | fill / contain / cover / none / scale-down | - |
alt | 原生 alt | string | - | - |
referrer-policy | 原生 referrerPolicy | string | - | - |
lazy | 是否开启懒加载 | boolean | — | false |
scroll-container | 开启懒加载后,监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
preview-src-list | 开启图片预览功能 | Array | — | - |
z-index | 设置图片预览的 z-index | Number | — | 2000 |
round | 是否需要圆角样式(当 shape 为 square 时有效) | Boolean | — | false |
shape | 设置图片的形状(当值为 circle 时,需要设置 width 和 height 相同) | String | 'circle' | 'square' | 'square' |
Events
事件名称 | 说明 | 回调参数 |
load | 图片加载成功触发 | (e: Event) |
error | 图片加载失败触发 | (e: Error) |
Slots
名称 | 说明 |
placeholder | 图片未加载的占位内容 |
error | 加载失败的内容 |
上次更新: 3/12/2025, 10:44:23 AM