画像ImgExperimental
ローディングスケルトンとエラー時のフォールバック付きの画像コンポーネントです。
プレビュー
状態とバリエーション
サンプル画像
Img は画像そのものの読み込み、代替テキスト、比率、収め方を扱います。
全体を収める
バナーや横長画像の全体を見せたい時は objectFit="contain" を指定します。
読み込み失敗
画像を読み込めない時は、fallback で代替表示を出します。
画像が見つかりません
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| src | string | - | 画像の URL です。 |
| alt | string | - | 画像の代替テキストです。 |
| aspectRatio | "square" | "video" | "auto" | "portrait" | "wide" | "auto" | 画像ラッパーのアスペクト比です。 |
| objectFit | "cover" | "contain" | "fill" | "none" | "scale-down" | "cover" | 画像の収め方です。 |
| loading | "eager" | "lazy" | browser default | ブラウザ標準の画像読み込み方式です。ImagePreview からも渡されます。 |
| showSkeleton | boolean | true | 読み込み中にスケルトンを表示するかどうかです。 |
| errorLabel | string | "Image not found" | 標準の読み込み失敗表示に出すラベルです。 |
| fallback | ReactNode | - | 読み込み失敗時に表示する任意の内容です。 |
使い方
Loading...