# 展示照片组件

组件来源: 办公系统v3 - 提取

## 1.功能说明

可指定若干照片的url，在页面展示这些照片（同时只会展示一张，会自动切换）

## 2.组件依赖

-- antd

## 3.依赖结构体

```tsx
export interface PhotoMessage{
    id: string,     //照片id
    url: string     //照片网址
}
```

## 3.组件接口

```tsx
interface Iprops {
    photos: PhotoMessage[]   //照片信息数组
    width?: number           //照片展示宽度
    height?: number          //照片展示高度
}
```

## 4.案例

通过组件导入照片并展示

1)导入组件

```tsx
import PhotoPanel, { PhotoMessage } from "@/common/photo";
```

2)定义一个由两张图片组成的列表（图片地址随便在百度上找的，可任意替换）

```tsx
const photos: PhotoMessage[] = [
    {
        id:"211ha",
        url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.qmbk.com%2Fjingyan%2FUploadFiles_2374%2F20210506%2F2021050611505434.jpg&refer=http%3A%2F%2Fwww.qmbk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668752520&t=73f75bd8056514678ddc9199964e7c2c"
    },
    {
        id:"2h31ha",
        url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F47676770%2F90f1f1edfe0e5c1c41b5f867abc60ddb.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDc2NzY3NzAvOTBmMWYxZWRmZTBlNWMxYzQxYjVmODY3YWJjNjBkZGIuanBn%2Fsign%2F63b38eaf62d76b3d8cb5d835075cdbe1.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668752676&t=75591a6ea41afa0e754391905a120916"
        },
]
```

3)插入组件

```tsx
<div className="tn-test">
    <PhotoPanel photos={photos}/>
</div>
```