Image 图片
带占位、错误兜底、懒加载和大图预览的图片组件。
基本使用
最简形式只需要 src，可加 width / height / alt。
大图预览
设置 preview 后，点击图片会弹出全屏预览，支持缩放 / 重置 / 关闭。
适应方式
fit 与 CSS object-fit 一致：fill / contain / cover / none / scale-down。
加载失败兜底
加载失败时优先显示 fallback 图，否则展示"加载失败"文案；也可用 #error slot 完全自定义。
懒加载
lazy 配合 IntersectionObserver，元素进入视口才请求图片，可降低首屏成本。
自定义占位
#placeholder slot 替换默认的"加载中"提示。
事件追踪（load / error / click）
load / error / click 三个事件覆盖图片完整生命周期，可用于埋点、上报、统计。
多张图片相册（ImagePreview）
<c-image-preview> 把多张图聚成一组，点击任一张进入统一预览：左右切换 / 缩放 / 关闭。
受控预览（外部按钮唤起）
preview 传对象进入受控模式：父组件决定 visible / current，预览状态变化通过 update:preview 与 change 回写。
失败兜底链
fallback 与 #error slot 可同时存在：fallback 是「先重试一次」，再失败才走 error slot。常用于 CDN 多重备份场景。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | string | — | 必填，图片地址 |
| alt | string | '' | 替代文本 |
| fit | ImageFit | 'fill' | 与 CSS object-fit 同义 |
| width | number | string | '' | 宽度（数字按 px） |
| height | number | string | '' | 高度 |
| preview | boolean | false | 启用大图预览，点击弹层 |
| fallback | string | '' | 加载失败时使用的兜底图片地址 |
| lazy | boolean | false | 懒加载（IntersectionObserver） |
| rootMargin | string | '0px' | 配合 lazy 的预加载距离 |
Events
| 事件名 | 回调签名 | 触发时机 |
|---|---|---|
| load | (e: Event) | 图片加载完成 |
| error | (e: Event) | 加载失败 |
| click | (e: MouseEvent) | 点击图片 |
Slots
| 名称 | 说明 |
|---|---|
| placeholder | 自定义加载中占位 |
| error | 自定义加载失败展示 |