Image (圖片)

顯示單一圖片，並提供預覽和轉換選項。

匯入 #


import Image from 'primevue/image';

基本 #

圖片的使用方式與標準的 img 元素類似。


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

預覽 #

啟用 preview 模式時，點擊圖片會顯示一個模態層，提供旋轉和縮放等轉換選項。


<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 角色和屬性。

當預覽啟用時，dialog 角色與 aria-modal 會被應用到覆蓋圖片容器上。

按鈕控制項使用 locale API 的 aria.rotateRight、aria.rotateLeft、aria.zoomIn、aria.zoomOut 和 aria.close 作為 aria-label。

按鈕列鍵盤支援

當預覽啟動時，關閉按鈕會接收初始焦點。

按鍵	功能
tab	在按鈕列中移動焦點。
enter	啟動按鈕。
space (空白鍵)	啟動按鈕。
esc	關閉圖片預覽。