如何在v-data-table中显示图像？

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

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

如果密码不起作用，给我看头部的密码。