vue.js - vuetity) 如何将图像放入 v-data-table

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>