如何在 vuetify 中将图像添加到 v-card

【问题标题】：How to add image to v-card in vuetify如何在 vuetify 中将图像添加到 v-card
【发布时间】：2020-03-23 18:27:56
【问题描述】：

我想实现下图中的设计展示：

我目前的设计：

我的代码是：

<v-card v-for="book in books" :key="book.id" class="mb-2" tile="">
                <v-img :src="book.image" max-width="80"></v-img>
                <v-card-title>{{ book.title }} </v-card-title>
                <v-card-subtitle>{{ book.author }}</v-card-subtitle>
</v-card>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

使用网格行>cols ...

         <v-card class="mb-2" tile="">
                 <v-row align="start">
                    <v-col class="shrink">
                         <v-img src="//placehold.it/80x120" max-width="80" class="ml-3"></v-img>
                    </v-col>
                    <v-col>
                         <v-card-title class="pa-0">Title</v-card-title>
                         <v-card-subtitle>Author</v-card-subtitle>
                     </v-col>
                 </v-row>
         </v-card>

演示：https://codeply.com/p/7aOBDcIOke

【讨论】：