vuetity)如何将图像放入v-data表中

Question

<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
hide-default-footer
class="elevation-1"
>
<template slot="items">
<td>
<img :src="items.imgsrc" style="width: 50px; height: 50px" />
</td>
</template>
</v-data-table>

在v-data-table标记之间我想我应该放一个有槽等的图片，但我一点也不知道。我之所以这么问，是因为无论我怎么努力都找不到确切的代码。"v-img"标记中的高度似乎有效，但图像没有显示出来。

<script>
export default {
data () {
return {
search: '',
headers: [ 
{
text: 'img',
align: 'start,
filterable: false,
value: 'imgsrc',
type: 'Image',
},
{
text: 'MyName',
align: 'start,
filterable: false,
value: 'name',
},
],
items: [
{
name: 'test1',
imgsrc: '@/assets/img/avatar.png',
},
{
name: 'test2',
imgsrc: '@/assets/img/avatar2.png',
},
],
}
},
}
</script>

帮助我

Answer 1

插槽需要像下面的一样使用

<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
hide-default-footer
class="elevation-1"
>
<template v-slot:item.imgsrc="{ item }">
<td>
<img :src="require(item.imgsrc)" style="width: 50px; height: 50px">
</td>
</template>
</v-data-table>