---
group: 进阶组件
category: Components
subtitle: 大图预览组件
toc: content
title: BigImagePreview 大图预览组件
demo:
  cols: 2
---

## 大图弹框

<code src="./demo/index.tsx">基本</code>
<code src="./demo/withRelatedImage.tsx">人脸碰撞模型</code>
<code src="./demo/noDescription.tsx">不要描述</code>

### API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| dataSource | 数据源 | DataProps | - |  |
| visible | 弹框显示隐藏 | boolean | - |  |
| activeTab | 模式 | 'COMPATER' 'NORMAL' 'VIDEO' | - | 对比图模式、场景图模式、视频模式 |
| width | 宽度 | string number | - |  |
| attributeList | 图片列表 | IAttributeList | - |  |
| tabs | 图片列表 | DataProps | - |  |
| tabsProps | tab菜单的透传,参考 antd-tabs | TabsProps | - |  |
| onTabChange | tab切换 | (newVal?: TAB_TYPE, oldVal?: TAB_TYPE) => void | - |  |
| isRelated | 人脸碰撞功能 | boolean | - |  |
| footer | 底部dom | React.ReactNode | - |  |
| onCancel | 关闭弹框 | () => void | - |  |
| compareImageProps | 参考@zhst/meta-CompareImage  | CompareImageProps | - |  |
| modalProps |  参考antd-Modal | ModalProps | - |  |
| cropperImageProps |  参考@zhst/meta-cropperImage | cropperImageProps | - |  |
| prevButtonProps |  上一页透传 | any | - |  |
| onPrevButtonClick | 上一页 |  () => void | - |  |
| nextButtonProps |  下一页透传 | any | - |  |
| onNextButtonClick |  下一页 |  () => void | - |  |
| btnGroupProps |  参考@zhst/meta-btnGroup | ModalProps | - |  |
| descriptionsProps |  参考antd-descriptions | ModalProps | - |  |
| relatedImageProps |  参考@zhst/meta-relatedImage | RelatedImageProps | - |  |
| theme |  参考antd-themeConfig | ThemeConfig | - |  |
| children |  参考antd-Modal | React.ReactNode | - |  |

### IBigImageModalData

```js
export interface IBigImageModalData {
  imageKey?: string     // 目标图
  imgSummary?: string   // 大图
  flvUrl?: string       // 视频链接
  compaterImage?: string   // 对比图
  odRect?: {          // od 框数据
    "x": number
    "y": number
    "w": number
    "h": number
    [key: string]: string | number;   // 拓展参数
  }[],
  attachImg?: {          // 小图，只有在场景图模式生效（人脸、形体）
    "url": string
    "label": string
    [key: string]: string
  }[],
  score?: number | string   // 人脸质量分
  showScore?: boolean   // 人脸质量分
  cameraPosition?: string // 摄像头位置
  time?: string // 摄像头拍摄时间
  objects: {             // 拓展参数、可以自由支配
    objectIndex: {
      [key: string]: any
    },
    objectType: string
    sourceObjectId: string
    level: number
    confidence: number
    infoOnSource: {
      [key: string]: any
    },
    qualityScore: number
    [key: string]: any
  }[]
}
```

### IAttributeList

```js
type IAttributeList {
  title: string;
  children: Pick<DescriptionsProps, 'items'>
}[]
```