图片

显示具有预览和转换选项的单个图像。

导入#


import { Image } from 'primereact/image';

图片的使用方式与标准 img 元素类似。


<Image src="/images/galleria/galleria7.jpg" alt="Image" width="250" />

启用 preview 模式会在单击图像时显示一个模态层，以提供旋转和缩放等转换选项。


<Image src="/images/galleria/galleria10.jpg" alt="Image" width="250" preview />

使用 zoomSrc 选择更高分辨率的图像在预览模式下显示。


<Image src="/images/galleria/galleria14.jpg" zoomSrc="/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />

默认情况下，当图像在预览模式下悬停时，会显示一个眼睛图标。使用 indicatorIcon 属性自定义内容。


<Image src="/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />

默认情况下，预览按钮是一个原生 button 元素，带有 aria-label，它引用 locale API 的 aria.zoomImage 属性，通过 previewButtonProps，你可以使用你自己的 aria 角色和属性，因为任何有效的属性都会隐式传递给按钮元素。

当预览处于活动状态时，dialog 角色和 aria-modal 将应用于覆盖图像容器。

按钮控件使用 locale API 中的 aria.rotateRight、aria.rotateLeft、aria.zoomIn、aria.zoomOut 和 aria.close 作为 aria-label。

激活预览时，关闭按钮会获得初始焦点。