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
Components.Images.
Components.Images.
Components.Images.
Components.Images.
设置组件高度
Components.Images.
设置内容的最大高度
Components.Images.
Components.Images.
Components.Images.
Components.Images.
Components.Images.
Components.Images.
Components.Images.
Components.Images.
内容的宽度
示例
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.