Image 图片
企业级图片展示组件，支持懒加载、预览、错误兜底等功能。
基础用法
展示一张基础的图片。
Example
适应模式
使用 fit 属性来控制图片如何适应其容器，类似于原生的 object-fit CSS 属性。
Example
图片预览
使用 preview 属性开启全屏大图预览。你也可以通过 preview-src-list 提供一个图片数组，以实现多图轮播。
Example
懒加载
使用 lazy 属性开启懒加载，图片将在进入可视区域时才开始加载。在加载过程中会自动显示骨架屏。
Scroll down to see lazy loaded image / Scroll down to see lazy loaded images
Example
水印
使用 watermark 属性可以为图片添加水印。你可以传入字符串或配置对象。
Example
错误兜底
当图片加载失败时，会自动显示默认的错误提示占位。
Example
API
BrImage
Props 属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | string | - | 图片的资源地址 |
| alt | string | - | 图片的替代文本 |
| fit | string | 'cover' | 图片适应容器的模式：fill, contain, cover, none, scale-down |
| lazy | boolean | false | 是否开启懒加载 |
| preview | boolean | false | 是否开启图片预览 |
| previewSrcList | string[] | [] | 预览图库的图片地址列表 |
| initialIndex | number | 0 | 预览图库的初始索引 |
| zIndex | number | 100 | 预览遮罩层的 z-index |
| watermark | string | object | - | 水印文本或配置对象 |
| rounded | string | 'none' | 圆角大小：none, sm, md, lg, xl, 2xl, full |
| shadow | string | 'none' | 阴影大小：none, sm, md, lg, xl |
| bordered | boolean | false | 是否显示边框 |
Events 事件
| 名称 | 类型 | 说明 |
|---|---|---|
| load | (e: Event) => void | 图片加载成功时触发 |
| error | (e: Event) => void | 图片加载失败时触发 |
| show | () => void | 预览打开时触发 |
| close | () => void | 预览关闭时触发 |
| switch | (index: number) => void | 在预览图库中切换图片时触发 |