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
Alternate text for screen readers. Leave empty for decorative images
Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted
Prevents the image from being cropped if it doesn't fit
Overlays a gradient onto the image. Only supports linear-gradient syntax, anything else should be done with classes (see examples)
Sets the component height
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
Sets the maximum height for the content
Sets the maximum width for the content
Components.Images.
Components.Images.
Overrides the default to change which parts get cropped off. Uses the same syntax as background-position
For use with srcset, see MDN
The image URL. This prop is mandatory
A set of alternate images to use based on device size. Read more...
The transition to use when switching from lazy-src to src
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.