Image

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.

API

v-img
Name
alt
Default
undefined
Type
string

Alternate text for screen readers. Leave empty for decorative images

Name
aspect-ratio
Default
undefined
Type
string | number

Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted

Name
contain
Default
false
Type
boolean

Prevents the image from being cropped if it doesn't fit

Name
gradient New in — v1.2
Default
undefined
Type
string

Overlays a gradient onto the image. Only supports linear-gradient syntax, anything else should be done with classes (see examples)

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
lazy-src
Default
undefined
Type
string

Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.

Use vuetify-loader to generate automatically

Name
max-height
Default
undefined
Type
number | string

Sets the maximum height for the content

Name
max-width
Default
undefined
Type
number | string

Sets the maximum width for the content

Name
min-height
Default
undefined
Type
number | string

Components.Images.

Name
min-width
Default
undefined
Type
number | string

Components.Images.

Name
position
Default
'center center'
Type
string

Overrides the default to change which parts get cropped off. Uses the same syntax as background-position

Name
sizes
Default
undefined
Type
string

For use with srcset, see MDN

Name
src
Default
undefined
Type
string | object

The image URL. This prop is mandatory

Name
srcset
Default
undefined
Type
string

A set of alternate images to use based on device size. Read more...

Name
transition
Default
fade-transition
Type
boolean | string

The transition to use when switching from lazy-src to src

Name
width
Default
undefined
Type
number | string

The width of the content

Examples

Contain and 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, clipping the sides of the image. Enabling the contain prop will prevent this, but will result in empty space at the sides.

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.

Fixed ratio

Gradients

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore