v-img shows url instead of image in vuetify - vue.js

Question

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>

Answer 1

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>