画像
Imageコンポーネントは、フォールバックをサポートして画像を表示するために使用されます。
インストール
npx nextui-cli@latest add image
上記のコマンドは、個別インストール専用です。もし、 @nextui-org/react がグローバルにインストールされている場合は、このステップをスキップできます。
インポート
使用方法
ブラー
isBlurred プロパティを使用すると、画像を複製してブラーをかけ、ぼやけた効果を作成できます。
ズーム
isZoomed プロパティを使用すると、ホバー時に画像をズームさせることができます。
アニメーションローディング
Imageコンポーネントには、画像が読み込み中であることを示す組み込みのskeletonアニメーションと、画像が読み込まれたときのopacityアニメーションがあります。
注意:
URLは、遅いネットワークをシミュレートするためにhttps://app.requestly.io/delayを使用しています。
フォールバック付き画像
fallbackSrcプロパティを使用すると、次の場合にフォールバック画像を表示できます。
fallbackSrcプロパティが指定されている場合。srcで提供された画像がまだ読み込み中の場合。srcで提供された画像の読み込みに失敗した場合。srcで提供された画像が見つからない場合。
Next.js Imageを使用する
Next.js は最適化されたImageコンポーネントを提供しており、NextUI のImageコンポーネントと組み合わせて使用することもできます。
注意: NextUI の
Imageコンポーネントはクライアントサイドで動作し、ローディング状態やアニメーションにuseStateのようなフックを使用します。これらの機能が不要な場合は、Next.js のImageのみを使用してください。
スロット
- img: 画像要素のスロット。
- wrapper: 画像のラッパー。配置、配置、および一般的な外観を処理します。
- zoomedWrapper: ズームされた画像のラッパーのスロット。画像コンテンツが親コンテナからあふれるのを防ぎます。
- blurredImg: 複製されたぼかし画像のラッパーのスロット。
API
Image Props
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| src | 文字列 | 画像のソース。 | - |
| srcSet | 文字列 | 画像の srcSet。 | - |
| sizes | 文字列 | 画像のサイズ。 | - |
| alt | 文字列 | 画像の alt テキスト。 | - |
| width | 数値 | 画像の幅。 | - |
| height | 数値 | 画像の高さ。 | - |
| radius | none | sm | md | lg | full | 画像のボーダー半径。 | xl |
| shadow | none | sm | md | lg | 画像の影。 | none |
| loading | eager | lazy | 画像に使用するローディング戦略。 | - |
| fallbackSrc | 文字列 | フォールバック画像のソース。 | - |
| isBlurred | 真偽値 | 背景に複製されたぼかし画像を表示するかどうか。 | false |
| isZoomed | 真偽値 | ホバー時に画像をズームするかどうか。 | false |
| removeWrapper | 真偽値 | ラッパー要素を削除するかどうか。これにより、画像は親要素の直接の子としてレンダリングされます。このプロパティを true に設定すると、スケルトンもズーム効果も機能しなくなります。 | false |
| disableSkeleton | 真偽値 | ローディング中に画像がスケルトンアニメーションを無効にするかどうか。 | false |
| classNames | Record<"img"｜ "wrapper"｜ "zoomedWrapper"｜ "blurredImg", string> | 画像スロットにカスタムクラス名をセットできます。 | - |
Image Events
| 属性 | 型 | 説明 |
|---|---|---|
| onLoad | ReactEventHandler<HTMLImageElement> | 画像のロード時に呼び出されるハンドラー。 |
| onError | () => void | 画像のロードに失敗した場合に呼び出されるハンドラー。 |
