want to show image in data table row

Question

i want to show a image in vuetify data table row. i tried this with below code.

<v-data-table :headers="headers" :items="desserts" :search="search" class="elevation-1">
      <template slot="items" slot-scope="props">
        <td>
          <img :src="'/assets/img/' + props.item.name" style="width: 50px; height: 50px" />
        </td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
      <template v-slot:item.action="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
        <v-icon small @click="deleteItem(item)">delete</v-icon>
      </template>
    </v-data-table>

but this code not works properly. only shows data with v-data-table loop and template slot not working. my script like this.

      search: "",
      headers: [
        {
          text: "Images",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" },
        { text: "Actions", value: "action", sortable: false }
      ],
      desserts: [
      {
          value: false,
          name: "notfound.png",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
      }],

how can i show my image. this method only shows image text name only.

dreijntjens dreijntjens · Accepted Answer · 2019-09-16T08:06:35

Presuming you use the last version of vuetify, the slots are working a little bit different, and you can define a slot only for the column you want to customize. (order is defined by the headers)

<div id="app">
    <v-data-table :headers="headers" :items="desserts" class="elevation-1">
      <template v-slot:item.name="{ item }">
          <img :src="'/assets/img/' + item.name" style="width: 50px; height: 50px" />
      </template>

      <template v-slot:item.action="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
        <v-icon small @click="deleteItem(item)">delete</v-icon>
      </template>
    </v-data-table>
</div>

want to show image in data table row

1 Answers