图像

v-img 组件具有丰富的功能，支持多媒体内容。结合 vuetify-loader，你可以添加动态渐进式图像，提供更好的用户体验。

使用

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

API

组件	描述
v-img	主要组件

注意

WARNING

lazy-src 属性在没有提供 height 和 aspect-ratio 属性时不会生效。因为图像容器需要一个非零的高度来渲染临时的图像。

示例

属性

图像填充

如果提供的纵横比与实际图像的不匹配，默认行为是填充尽可能多的空间而不裁剪。要填充整个可用空间，请使用 cover 属性。

高度

v-img 将自动根据其 src 的大小增长，保持正确的纵横比。你可以使用 height 和 max-height 属性来限制这一行为。

插槽

占位符

v-img 具有一个特殊的 placeholder 插槽，用于在图像加载时显示占位符。注意：下面的示例有一个无法加载的错误 src，因此你无法看到占位符。

出错

v-img 具有一个错误插槽，可以用来在加载源图像时发生错误时显示替代内容。这个插槽的常见用法是在原始图像不可用时加载一个备用图像。

其他

未来的图片格式

默认情况下，v-img 将渲染一个基本的 <img> 元素。如果你想要在旧版本浏览器上使用 .webp 图像，并提供一个回退选项，你可以将 <source> 元素的列表传递给 sources 插槽：

<v-img src="image.jpeg">
  <template #sources>
    <source srcset="image.webp">
  </template>
</v-img>

类似于:

<picture>
  <source srcset="image.webp">
  <img src="image.jpeg">
</picture>

srcset 和 media 属性可以用作改变图像大小。具体请参考 MDN。

栅格

您可以使用 v-img 来展示图片库。

复杂的栅格布局

使用 flex-box 绘制更为复杂布局的图片库。