イメージ

プレビューと変換オプション付きで単一の画像を表示します。

インポート#


import { Image } from 'primereact/image';
         

基本#

Image は標準の img 要素と同様に使用されます。

Image

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

プレビュー#

preview モードを有効にすると、画像をクリックしたときにモーダルレイヤーが表示され、回転やズームなどの変換オプションが提供されます。

Image

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

サムネイル#

プレビューモードで表示する高解像度画像を選択するには、zoomSrc を使用します。

Image

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

テンプレート#

プレビューモードで画像にカーソルを合わせると、デフォルトで目のアイコンが表示されます。カスタムコンテンツには indicatorIcon プロパティを使用します。

Image

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

アクセシビリティ#

スクリーンリーダー

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

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

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

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

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

キー機能
tabボタンバー間でフォーカスを移動します。
enterボタンをアクティブにします。
スペースボタンをアクティブにします。
esc画像プレビューを閉じます。
              PrimeReact 10.8.3 by PrimeTek