Question

我正在使用vuetify 2.3.10。我在这里面临的问题是v-img显示image_url而不是图像。我尝试了类似make altinstall的方法，但对我没有用。请帮助我找到问题。

<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数据的内容...这就是为什么您看到的是网址而不是图片

此外，您还应该将内容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>

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

1 个答案: