Image

プレビューおよび変換オプションを備えた単一の画像を表示します。

インポート #


import Image from 'primevue/image';

基本 #

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>

アクセシビリティ #

スクリーンリーダー

プレビューボタンは、デフォルトではlocale APIのaria.zoomImageプロパティを参照するaria-labelを持つネイティブのbutton要素です。previewButtonPropsを使用すると、任意の有効な属性がボタン要素に暗黙的に渡されるため、独自のariaロールと属性を使用できます。

プレビューがアクティブな場合、aria-modalを持つdialogロールがオーバーレイイメージコンテナに適用されます。

ボタンコントロールは、locale APIのaria.rotateRight、aria.rotateLeft、aria.zoomIn、aria.zoomOut、aria.closeをaria-labelとして使用します。

ボタンバーのキーボードサポート

プレビューがアクティブになると、閉じるボタンが最初のフォーカスを受け取ります。

キー	機能
tab	ボタンバーを介してフォーカスを移動します。
enter	ボタンをアクティブにします。
space	ボタンをアクティブにします。
esc	画像プレビューを閉じます。