Images
The v-img
component is packed with features to support rich media. Combined with the vuetify-loader, you can add dynamic progressive images to provide a better user experience.
Usage
v-img
component is used to display a responsive image with lazy-load and placeholder.
API
Component | Description |
---|---|
v-img | Primary Component |
Examples
Props
Cover
If the provided aspect ratio doesn’t match that of the actual image, the default behavior is to fill as much space as possible without cropping. To fill the entire available space use the cover
prop.
Height
v-img
will automatically grow to the size of its src
, preserving the correct aspect ratio. You can limit this with the height
and max-height
props.
Slots
Placeholder
v-img
has a special placeholder
slot for placeholder to display while image’s loading. Note: the example below has bad src which won’t load for you to see placeholder.
Misc
Future image formats
By default v-img
will render a basic <img>
element. If you want to use .webp
images with a fallback for older browsers, you can pass a list of <source>
elements to the sources
slot:
<v-img src="image.jpeg">
<template #sources>
<source srcset="image.webp">
</template>
</v-img>
This will behave similarly to:
<picture>
<source srcset="image.webp">
<img src="image.jpeg">
</picture>
srcset
and media
attributes can also be used for art direction or alternate sizes, see MDN for more.
Grid
You can use v-img
to make, for example, a picture gallery.