CODEWITHSUNDEEP
vue.jsvuetify.js
user12763413
user12763413

Reputation: 1349

v-img shows url instead of image in vuetify

I am using vuetify 2.3.10. The issue I am facing here is the v-img shows the image_url instead of the image. I tried something like this https://stackoverflow.com/a/53411531/12763413 but it didnt work for me. Please help me find the issue.

<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>

Upvotes: 0

Views: 531

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37913

Problem is not in v-img but in your usage of v-data-table - You are using non-existent slot items (should be item) so v-data-table is ignoring your slot content and rendering content of your users data as is...that's why you see url's instead of images

Also you should wrap the content item slot into <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>

Upvotes: 1

Related Questions