vuetify) 如何将图像放入 v-data-table答案

【问题标题】：vuetity) How to put an image in a v-data-tablevuetify) 如何将图像放入 v-data-table
【发布时间】：2021-08-30 01:03:43
【问题描述】：

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

帮帮我

【问题讨论】：

标签： vue.js vuetify.js slot v-data-table

【解决方案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>

【讨论】：

非常感谢您百忙之中。检查了。我不知道“要求”。