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

Components.Images.

名称
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