---
url: /components/basic/FaImagePreview.md
---
# FaImagePreview 图片预览

带加载状态和错误处理的图片预览组件，支持点击放大查看。

## 使用场景

* 商品图片展示
* 用户头像预览
* 图片画廊
* 附件图片预览
* 缩略图列表
* 相册展示

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `src` | `string` | **必需** | 图片 URL |
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |

## Slots

| 名称 | 说明 |
|------|------|
| `loading` | 自定义加载状态内容 |
| `error` | 自定义错误状态内容 |

## Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| `load` | - | 图片加载成功时触发 |
| `error` | - | 图片加载失败时触发 |

## 注意事项

1. **点击放大**：点击图片会自动打开全屏预览
2. **加载状态**：图片加载时显示 loading 图标
3. **错误处理**：加载失败时显示错误图标
4. **hover 效果**：鼠标悬停时图片会轻微放大
5. **响应式**：建议设置合适的尺寸或使用响应式类