图片

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

导入 #


import Image from 'primevue/image';

基本用法 #

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


<Image src="/image.jpg" alt="Image" width="250" />

预览 #

启用预览模式会在单击图像时显示一个模态层，以提供诸如旋转和缩放之类的转换选项。


<Image src="/image.jpg" alt="Image" width="250" preview />

模板 #

当图像在预览模式下悬停时，默认情况下会显示一个眼睛图标，使用 previewicon 插槽可以自定义内容。此外，image 和 preview 插槽可分别用于定义缩略图和详细图像。


<Image alt="Image" preview>
    <template #previewicon>
        <i class="pi pi-search"></i>
    </template>
    <template #image>
        <img src="/thumbnail.jpg" alt="image" />
    </template>
    <template #preview="slotProps">
        <img src="/image.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
    </template>
</Image>

可访问性 #

屏幕阅读器

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

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

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

按钮栏键盘支持

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

键	功能
tab	在按钮栏中移动焦点。
enter	激活按钮。
空格键	激活按钮。
esc	关闭图像预览。

图片