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
Имя
alt
По умолчанию
undefined
Тип
string

Components.Images.

Имя
aspect-ratio
По умолчанию
undefined
Тип
string | number

Components.Images.

Имя
contain
По умолчанию
false
Тип
boolean

Components.Images.

Имя
gradient New in — v1.2
По умолчанию
undefined
Тип
string

Components.Images.

Имя
height
По умолчанию
undefined
Тип
number | string

Установка высоты компонента

Имя
lazy-src
По умолчанию
undefined
Тип
string

Components.Images.

Имя
max-height
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную высоту для содержимого

Имя
max-width
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную ширину для содержимого

Имя
min-height
По умолчанию
undefined
Тип
number | string

Components.Images.

Имя
min-width
По умолчанию
undefined
Тип
number | string

Components.Images.

Имя
position
По умолчанию
'center center'
Тип
string

Components.Images.

Имя
sizes
По умолчанию
undefined
Тип
string

Components.Images.

Имя
src
По умолчанию
undefined
Тип
string | object

Components.Images.

Имя
srcset
По умолчанию
undefined
Тип
string

Components.Images.

Имя
transition
По умолчанию
fade-transition
Тип
boolean | string

Components.Images.

Имя
width
По умолчанию
undefined
Тип
number | string

Ширина содержимого

Примеры

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