Как показать изображение в таблице v-данных?

Question

Я хочу показать миниатюру в строке v-data-table.

Это мои данные json:

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

Я пытался показать изображение вот так:

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

Это сценарий:

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

Но отображается пустой экран с "нет данных". Кто-нибудь может помочь? Спасибо.

Answer 1

используйте v-simple-table, зацикливайте изображения и вызывайте данные внутри, используя

Answer 2

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

Если код не работает, покажите коды голов.