# Images

v-img コンポーネントにはリッチメディアをサポートする機能が詰め込まれています。 vuetify-loaderと組み合わせることで、ダイナミックなプログレッシブ画像を追加し、より良いユーザーエクスペリエンスを提供することができます。

# 使い方

v-imgコンポーネントは、遅延読み込みとプレースホルダを持つレスポンシブな画像を表示するために使用されます。

# API

# 注意事項

# サンプル

# Props

# Aspect ratio

画像のアスペクト比を変更したい場合は、固定アスペクト比を設定できます。

# Contain

If the provided aspect ratio doesn’t match that of the actual image, the default behavior is to fill as much space as possible, clipping the sides of the image. Enabling the contain prop will prevent this, but will result in empty space at the sides.

# グラデーション

The gradient prop can be used to apply a simple gradient overlay to the image. More complex gradients should be written as a class on the content slot instead.

# 高さ

v-img は自動的に srcのサイズになり、正しいアスペクト比を維持します。 これは heightmax-height propsで制限できます。

# Slots

# プレースホルダー

v-img には、画像の読み込み中に表示するプレースホルダ用の placeholder スロットがあります。 注: 以下の例には、プレースホルダーを表示するためにロードされない不正な src があります。

# その他

# グリッド

例えば、v-imgを使って画像ギャラリーを作ることもできます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/18/2021, 7:08:41 AM