Vuetify

商店

企业版

v-img 组件包含支持丰富媒体的功能。与 vuetify-loader 结合使用,您可以添加动态渐进图像以提供更好的用户体验。

v-img 组件用于显示具有延迟加载和占位符的响应图像。

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

如果提供的长宽比与实际图像不匹配,则默认行为是填充尽可能多的空间,裁剪图像的边。启用 contain 属性可以防止这种情况,但会导致两边出现空白。

v-img 将自动增长到其 src 的大小,保持正确的长宽比。您可以限制这与 heightmax-height 属性。

如果你想改变图像的长宽比,你可以设置一个固定的长宽比。

v-img 有一个特殊的 placeholder 插槽,占位符显示图像的加载。注意:下面的例子有一个错误的 src,它不会为你加载占位符。

gradient 属性可用于将简单的渐变叠加层应用于图像。 应该将更复杂的渐变作为类写在内容插槽上。

您可以使用 v-img 来制作图片库。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!