Image 图片

展示图片，支持多种形状、懒加载、加载占位、加载失败回退、预览大图及多图预览。

基础用法

通过 src 设置图片地址，默认包含懒加载。

图片形状

通过 shape 设置图片形状，支持 square（方形）、rounded（圆角）、circle（圆形）。

square

rounded

circle

填充模式

通过 fit 设置图片填充方式，等同于 CSS object-fit 属性。使用正方形容器更易观察差异。

contain

cover

fill

none

scale-down

图片预览

设置 preview 开启点击预览大图功能，支持缩放、旋转操作及键盘快捷键（← → Esc +/-）。

多图预览

通过 previewUrls 设置预览图片列表，点击任一图片可在预览中切换浏览。

自定义预览地址

通过 previewSrc 设置预览时所用的大图地址，与 src 缩略图不同。

加载失败回退

通过 fallback 设置图片加载失败时显示的备用图片地址。

无回退

有回退

自定义占位与错误

使用 placeholder 和 error 插槽自定义加载中和加载失败的展示内容。

加载中…

自定义遮罩

使用 previewMask 插槽自定义预览悬停遮罩内容。

设置宽高

通过 width 和 height 设置图片容器大小，支持数字(px)和字符串。

自定义圆角

通过 borderRadius 覆盖形状默认的圆角值。

对象定位

通过 objectPosition 设置图片在容器中的聚焦位置，等同于 CSS object-position。

top

center

bottom

禁用懒加载

设置 lazy 为 false 可关闭原生懒加载。

参数	类型	默认值	说明
`src`	`string`	`—`	图片地址（必填）
`alt`	`string`	`—`	图片替代文本
`width`	`number \| string`	`—`	容器宽度
`height`	`number \| string`	`—`	容器高度
`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	图片填充方式，等同 CSS object-fit
`shape`	`'square' \| 'rounded' \| 'circle'`	`'square'`	图片形状
`preview`	`boolean`	`false`	是否可预览大图
`lazy`	`boolean`	`true`	是否启用原生懒加载
`fallback`	`string`	`—`	加载失败时显示的备用图片地址
`previewSrc`	`string`	`—`	预览时使用的大图地址（默认使用 src）
`objectPosition`	`string`	`—`	图片聚焦位置，等同 CSS object-position
`borderRadius`	`string`	`—`	自定义圆角，覆盖 shape 的默认值
`previewUrls`	`string[]`	`[]`	预览图片列表，用于多图预览切换
`initialIndex`	`number`	`0`	多图预览时的初始索引