图片 Image
顾名思义，展示图片。
该文档示例中的图片来自 Lorem Picsum。
基础使用
可以设置 src、srcset、alt，和 <img> 标签一样使用。
隐藏源代码
适应容器
objectFit 属性设置图片适应容器的方式，效果同 CSS 的 object-fix。
隐藏源代码
占位元素和加载失败
placeholder 和 error 分别设置加载中的占位元素和加载失败的展示内容。
Loading...
隐藏源代码
懒加载
loading 设置由浏览器实现的原生图片懒加载。lazy 开启基于 IntersectionObserver 的懒加载，root 属性设置 lazy 懒加载可视区域。
为了防止重排发生，减少页面抖动，懒加载时推荐设置图片大小。
Loading Prop
Lazy Prop
隐藏源代码
预览
previewable 开启大图预览，预览图片尺寸基于图片资源的尺寸计算。
隐藏源代码
API
ImageProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| src | string | 是 | | 图片资源地址，行为和原生 <img> 的 src 类似。 | 0.0.3 |
| srcset | string | 是 | | 响应式的图片资源地址，行为和原生 <img> 的 srcset 类似。 | 0.0.3 |
| alt | string | 是 | | 原生 <img> 的 alt 类似。 | 0.0.3 |
| objectFit | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 是 | 'fill' | 图片适应容器的方式，效果同 CSS 的 object-fix。 | 0.0.3 |
| loading | 'eager' | 'lazy' | 是 | 'eager' | 原生的图片懒加载。 | 0.0.3 |
| lazy | boolean | 是 | false | 图片懒加载，开启后 loading 属性将失效，该属性不具有响应式。 | 0.0.3 |
| root | HTMLElement | string | 是 | | 基于 lazy 属性的图片懒加载，可视区域的元素，为空时为视口，该属性不具有响应式。 | 0.0.3 |
| rootMargin | number | [number, number] | 是 | [100, 200] | 基于 lazy 属性的图片懒加载，距可视区域距离，该属性不具有响应式。 | 0.0.3 |
| previewable | boolean | 是 | false | 是否开启大图预览。 | 0.0.3 |
| previewSrc | string | 是 | | 预览时显示的图片地址，不传时使用当前图片。 | 0.2.1 |
| maskProps | Omit<MaskProps, 'zIndex'> | 是 | | 预览时遮罩的属性。 | 0.0.3 |
| popupWrapperProps | { zIndex?: number, root?: HTMLElement | string, destroyOnHide?: boolean } | 是 | | 预览时浮动层的属性。 | 0.0.3 |
| popupWrapperProps | { maxWidth?: number, maxHeight?: number, margin?: number} | 是 | { margin: 32, maxWidth: Infinity, maxHeight: Infinity } | 预览时浮动层的属性。 | 0.0.3 |
| referrerpolicy | string | 是 | 'no-referrer' | 原生 <img> 的 referrerpolicy。 | 0.0.3 |
| crossorigin | 'anonymous' | 'use-credentials' | '' | 是 | '' | 原生 <img> 的 crossorigin。 | 0.0.3 |
| previewDestroyOnHide | boolean | 是 | false | 预览模式的浮层是否会在隐藏时销毁。 | 0.1.0 |
ImageEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| load | img: HTMLImageElement, event: Event | 图片加载完成的回调。 | 0.0.3 |
| error | img: HTMLImageElement, error: string | Event | 图片加载失败的回调。 | 0.0.3 |
| loading | img: HTMLImageElement | lazy 属性的图片懒加载开始加载图片的回调。 | 0.0.3 |
| preview | event: MouseEvent | 开启预览图片的回调。 | 0.0.3 |
| close | event: MouseEvent | 关闭预览图片的回调。 | 0.0.3 |
ImageSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| placeholder | | 加载中的占位元素。 | 0.0.3 |
| error | | 加载失败的展示内容。 | 0.0.3 |