---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/display/ImageViewer
title: ImageViewer
---
```ts
import { ImageViewer } from "zmp-ui";
```


Dùng để tạo một gallery cho phép người dùng xem hình ảnh với kích thước của màn hình, có thể tương tác thu phóng, chuyển hình,...

## Ví dụ



## Bảng thuộc tính


### ImageViewerProps

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| images | ImageType[] | No |  | Mảng chứa thông tin của các ảnh cần hiển thị. Mỗi thiết lập bao gồm đường dẫn và mô tả của ảnh. Chi tiết xem . |
| activeIndex | number | No |  | Index của ảnh đang được hiển thị. |
| visible | boolean | No | false | Trạng thái hiển thị của image viewer. Cần được sử dụng cùng với `onClose` để đóng image viewer. |
| onClose | () => void | No |  | Callback được gọi khi image viewer được đóng. Cần phải update lại state của `visible` nếu được truyền vào. |
| maskStyle | CSSProperties | No |  | Inline style cho mask của image viewer. |
| maskClassName | string | No |  | CSS class cho mask của image viewer. |

### ImageType

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| src | string | No |  | Đường dẫn của ảnh. |
| alt | string | No |  | Mô tả của ảnh. Sẽ được hiển thị khi không thể load ảnh. |