v-img 在 vuetify 中显示 url 而不是图像

Question

我正在使用 vuetify 2.3.10。我在这里面临的问题是 v-img 显示的是 image_url 而不是图像。我尝试了类似https://stackoverflow.com/a/53411531/12763413 的方法，但它对我不起作用。请帮我找出问题。

<template>
  <v-container fluid grid-list-lg>
    <v-card flat>
     <v-data-table 
       :headers="headers"
       :items="users"
       v-model="users"
       :sort-by="['full_name']"
       class="elevation-1"
     >
     <template slot="items" slot-scope="props">
       <td><v-img class="user-image" :src='props.item.image_url'/></td>
       <td class="full-name">{{ props.item.full_name }}</td>
     </template>
    </v-data-table>
   </v-card>
  </v-container>
</template>



<script>

 export default {
  props: ['users'],
  data: () => ({
    headers: [
      { text: '', value: 'image_url', sortable: false },
      { text: 'Name', value: 'full_name', sortable: false  }
    ]
  })
 };
</script>

Answer 1

问题不在v-img 中，而是在您对v-data-table 的使用中 - 您正在使用不存在的插槽items（应该是item）所以v-data-table 忽略了您的插槽内容和渲染内容users 数据原样...这就是为什么你看到的是 url 而不是图片

您还应该将内容 item 插槽包装到 <tr></tr>

<template>
  <v-container fluid grid-list-lg>
    <v-card flat>
     <v-data-table 
       :headers="headers"
       :items="users"
       v-model="users"
       :sort-by="['full_name']"
       class="elevation-1"
     >
     <template slot="item" slot-scope="props">
       <tr>
         <td><v-img class="user-image" :src='props.item.image_url'/></td>
         <td class="full-name">{{ props.item.full_name }}</td>
       </tr>
     </template>
    </v-data-table>
   </v-card>
  </v-container>
</template>