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
Nome
alt
Padrão
undefined
Tipos
string

Components.Images.

Nome
aspect-ratio
Padrão
undefined
Tipos
string | number

Components.Images.

Nome
contain
Padrão
false
Tipos
boolean

Components.Images.

Nome
gradient New in — v1.2
Padrão
undefined
Tipos
string

Components.Images.

Nome
height
Padrão
undefined
Tipos
number | string

Define a altura do componente

Nome
lazy-src
Padrão
undefined
Tipos
string

Components.Images.

Nome
max-height
Padrão
undefined
Tipos
number | string

Define a altura máxima do conteúdo

Nome
max-width
Padrão
undefined
Tipos
number | string

Components.Images.

Nome
min-height
Padrão
undefined
Tipos
number | string

Components.Images.

Nome
min-width
Padrão
undefined
Tipos
number | string

Components.Images.

Nome
position
Padrão
'center center'
Tipos
string

Components.Images.

Nome
sizes
Padrão
undefined
Tipos
string

Components.Images.

Nome
src
Padrão
undefined
Tipos
string | object

Components.Images.

Nome
srcset
Padrão
undefined
Tipos
string

Components.Images.

Nome
transition
Padrão
fade-transition
Tipos
boolean | string

Components.Images.

Nome
width
Padrão
undefined
Tipos
number | string

A largura do conteúdo

Exemplos

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