How to show image in v-data-table?

Question

I want to show a thumbnail image in a row in v-data-table.

This is my json data:

"images": {
            "thumbnail": {
                "url": "post1.jpg"
            },
            "original": {
                "url": "post1.jpg"
            }
        }

I tried to show the image like this:

<v-data-table :headers="headers" ...>
    <template v-slot:item.images.thumbnail.url="{ item }">
       <img :src="require('@/assets/media/' + item.images.thumbnail.url)" height="20" />
    </template>
</v-data-table>

This is the script:

 headers: [ ....
     { text: 'Post Preview', value: 'images.thumbnail.url', sortable: false },
 ]

But a blank screen shows with 'no data available'. Can anyone help? Thanks.

Answer 1

 <template #[`item.images.thumbnail`]="{ item }">
   <img :src="require('@/assets/media/' + item.images.thumbnail.url)" height="20" />
 </template>

If the code doesn't work, show me the codes of the heads.

Answer 2

use v-simple-table and loop the images in and call the data inside using