图像

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

v-img 组件使用 v-intersect 指令，该指令要求 IE11和 Safari 使用 Polyfill 。 如果检测到不支持此功能的浏览器，则图像仍会照常加载。

用例

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

Images（图像） - 图1

API

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

Images（图像） - 图2

示例

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

包含和覆盖

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

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row justify="space-around">
  4.       <v-col cols="5">
  5.         <div class="title mb-1">Default (cover)</div>
  6.         <div class="subheading">Matching</div>
  7.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.7"></v-img>
  8.         <div class="subheading pt-4">Too high</div>
  9.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="2"></v-img>
  10.         <div class="subheading pt-4">Too low</div>
  11.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.4"></v-img>
  12.       </v-col>
  14.       <v-col cols="5">
  15.         <div class="title mb-1">Contain</div>
  16.         <div class="subheading">Matching</div>
  17.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.7" contain></v-img>
  18.         <div class="subheading pt-4">Too high</div>
  19.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="2" contain></v-img>
  20.         <div class="subheading pt-4">Too low</div>
  21.         <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.4" contain></v-img>
  22.       </v-col>
  23.     </v-row>
  24.   </v-container>
  25. </template>

Images（图像） - 图3

高度

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

template script

  1. <template>
  2.   <v-container
  3.     class="fill-height"
  4.     fluid
  5.     style="min-height: 434px"
  6.   >
  7.     <v-fade-transition mode="out-in">
  8.       <v-row v-if="show" key="0">
  9.         <v-col cols="6">
  10.           <v-card>
  11.             <v-img
  12.               src="https://picsum.photos/350/165?random"
  13.               height="125"
  14.               class="grey darken-4"
  15.             ></v-img>
  16.             <v-card-title class="title">height</v-card-title>
  17.           </v-card>
  18.         </v-col>
  20.         <v-col cols="6">
  21.           <v-card>
  22.             <v-img
  23.               src="https://picsum.photos/350/165?random"
  24.               height="125"
  25.               contain
  26.               class="grey darken-4"
  27.             ></v-img>
  28.             <v-card-title class="title">height with contain</v-card-title>
  29.           </v-card>
  30.         </v-col>
  32.         <v-col cols="6">
  33.           <v-card>
  34.             <v-img
  35.               src="https://picsum.photos/350/165?random"
  36.               max-height="125"
  37.               class="grey darken-4"
  38.             ></v-img>
  39.             <v-card-title class="title">max-height</v-card-title>
  40.           </v-card>
  41.         </v-col>
  43.         <v-col cols="6">
  44.           <v-card>
  45.             <v-img
  46.               src="https://picsum.photos/350/165?random"
  47.               max-height="125"
  48.               contain
  49.               class="grey darken-4"
  50.             ></v-img>
  51.             <v-card-title class="title">max-height with contain</v-card-title>
  52.           </v-card>
  53.         </v-col>
  54.       </v-row>
  56.       <v-row v-else key="1" justify="center">
  57.         <v-btn text @click="show = true">Load images</v-btn>
  58.       </v-row>
  59.     </v-fade-transition>
  60.   </v-container>
  61. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       show: false,
  5.     }),
  6.   }
  7. </script>

Images（图像） - 图4

固定比例

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

template script style

  1. <template>
  2.   <v-container fluid>
  3.     <v-slider v-model="width" min="200" max="500" step="1"></v-slider>
  4.     <v-navigation-drawer
  5.       :width="width"
  6.       :value="true"
  7.       stateless
  8.     >
  9.       <v-img :aspect-ratio="16/9" src="https://cdn.vuetifyjs.com/images/parallax/material.jpg">
  10.         <v-row align="end" class="lightbox white--text pa-2 fill-height">
  11.           <v-col>
  12.             <div class="subheading">Jonathan Lee</div>
  13.             <div class="body-1">heyfromjonathan@gmail.com</div>
  14.           </v-col>
  15.         </v-row>
  16.       </v-img>
  18.       <v-list>
  19.         <template v-for="(item, i) in items">
  20.           <v-divider v-if="item.divider" :key="i"></v-divider>
  21.           <v-list-item v-else :key="item.title" @click>
  22.             <v-list-item-action>
  23.               <v-icon>{{ item.icon }}</v-icon>
  24.             </v-list-item-action>
  25.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  26.           </v-list-item>
  27.         </template>
  28.       </v-list>
  29.     </v-navigation-drawer>
  30.   </v-container>
  31. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       width: 300,
  5.       items: [
  6.         { icon: 'inbox', title: 'Inbox' },
  7.         { icon: 'star', title: 'Starred' },
  8.         { icon: 'send', title: 'Sent mail' },
  9.         { icon: 'drafts', title: 'Drafts' },
  10.         { divider: true },
  11.         { icon: 'mail', title: 'All mail' },
  12.         { icon: 'delete', title: 'Trash' },
  13.         { icon: 'error', title: 'Spam' },
  14.       ],
  15.     }),
  16.   }
  17. </script>
  1. <style scoped>
  2.   .v-navigation-drawer {
  3.     transition: none !important;
  4.   }
  6.   .lightbox {
  7.     box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.2);
  8.     background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
  9.   }
  10. </style>

Images（图像） - 图5

Business Support

Support your business and Vuetify at the same time with support directly from the author.

ads by Vuetify

]($ddeb3f83df3c619a.md)

占位符

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

template

  1. <template>
  2.   <v-row align="center" justify="center">
  3.     <v-img
  4.       src="https://bad.src/not/valid"
  5.       lazy-src="https://picsum.photos/id/11/100/60"
  6.       aspect-ratio="1"
  7.       class="grey lighten-2"
  8.       max-width="500"
  9.       max-height="300"
  10.     >
  11.       <template v-slot:placeholder>
  12.         <v-row
  13.           class="fill-height ma-0"
  14.           align="center"
  15.           justify="center"
  16.         >
  17.           <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
  18.         </v-row>
  19.       </template>
  20.     </v-img>
  21.   </v-row>
  22. </template>

Images（图像） - 图6

渐变

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

template style

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="6" sm="4">
  5.         <v-img
  6.           src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
  7.           gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
  8.         ></v-img>
  9.       </v-col>
  11.       <v-col cols="6" sm="4">
  12.         <v-img src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg">
  13.           <div class="fill-height bottom-gradient"></div>
  14.         </v-img>
  15.       </v-col>
  17.       <v-col cols="6" sm="4">
  18.         <v-img src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg">
  19.           <div class="fill-height repeating-gradient"></div>
  20.         </v-img>
  21.       </v-col>
  22.     </v-row>
  23.   </v-container>
  24. </template>
  1. <style scoped>
  2.   .bottom-gradient {
  3.     background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
  4.   }
  6.   .repeating-gradient {
  7.     background-image: repeating-linear-gradient(-45deg,
  8.                         rgba(255,0,0,.25),
  9.                         rgba(255,0,0,.25) 5px,
  10.                         rgba(0,0,255,.25) 5px,
  11.                         rgba(0,0,255,.25) 10px
  12.                       );
  13.   }
  14. </style>

Images（图像） - 图7

栅格

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

template

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card>
  5.         <v-container fluid>
  6.           <v-row>
  7.             <v-col
  8.               v-for="n in 9"
  9.               :key="n"
  10.               class="d-flex child-flex"
  11.               cols="4"
  12.             >
  13.               <v-card flat tile class="d-flex">
  14.                 <v-img
  15.                   :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
  16.                   :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
  17.                   aspect-ratio="1"
  18.                   class="grey lighten-2"
  19.                 >
  20.                   <template v-slot:placeholder>
  21.                     <v-row
  22.                       class="fill-height ma-0"
  23.                       align="center"
  24.                       justify="center"
  25.                     >
  26.                       <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
  27.                     </v-row>
  28.                   </template>
  29.                 </v-img>
  30.               </v-card>
  31.             </v-col>
  32.           </v-row>
  33.         </v-container>
  34.       </v-card>
  35.     </v-col>
  36.   </v-row>
  37. </template>

Images（图像） - 图8