# 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.

Usage example coming soon...


# Examples

# Props

# Aspect ratio

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

# 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">

This will behave similarly to:

  <source srcset="image.webp">
  <img src="image.jpeg">

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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.