vuetify.js - 如何在 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>

如果代码不起作用，请告诉我头部的代码。