Vuetify

ショップ

企業向け

v-img コンポーネントには、リッチメディアをサポートする機能が満載されています。vuetify-loaderと組み合わせて、動的なプログレッシブ画像を追加して、ユーザーエクスペリエンスを向上させることができます。

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

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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.

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

You can set a fixed aspect ratio if you want to change aspect ratio of the image.

v-img には、イメージの読み込み中に表示するプレースホルダー用の特別な placeholder スロットがあります。注: 以下の例は、プレースホルダを表示するために不正なsrcを指定しています。

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.

You can use v-img to make, for example, a picture gallery.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!