Vue + Vuetify data table first column image

Question

I am using Vue + Vuetify and I am trying to add image in the first column.

Table Template Code

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
  light
>
  <template slot="items" slot-scope="props">
    <td><img :src="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>
  <v-alert slot="no-results" :value="true" dir="rtl" color="error" icon="warning">
    {{ PRODUCTS_TABLE_TEXT.NO_RESULT }} "{{ search }}"
  </v-alert>
</v-data-table>

Table Script Code

data () {
  return {
    //TEXT
    PRODUCTS_TABLE_TEXT: products_table_text,
    //TABLE DATA
    search: '',
    headers: [
      {
        text: products_table_text.columns.IMAGE,
        align: 'center',
        sortable: false,
        value: 'image'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' }
    ],
    desserts: [
      {
        value: false,
        name: '1.jpg',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%'
      },
    ]
  }
}

What I have tried to do

I have tried to add the HTML image code in the name variable like this:

name: '<img src="./../../assets/products-images/1.jpg" style="width: 50px; height: 50px">'

But it just printed the HTML as a text and did not render it.

Yea you are right I have tried that too but it did not load the image even if the path is correct i don't know why! — Dill
– Dill, Commented Aug 21, 2018 at 14:51
from where are you getting item.carbs data that you are populating on html? — Helping hand
– Helping hand, Commented Aug 21, 2018 at 14:58

fker love · Accepted Answer · 2019-11-14 11:30:28Z

I am also stacked for som minute but this is the easy way to use an image in vuetify data table Table Template Code

  <template>
 <v-layout row wrap>
      <v-flex xs12>
        <v-data-table :headers="headers" :items="carts" class="elevation-0">
          <template v-slot:item.image="{ item }">
            <div class="p-2">
              <v-img :src="item.image" :alt="item.name" height="100px"></v-img>
            </div>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
<template/>

Table Script Code

  <script>
import { mapGetters } from "vuex";

export default {
    data() {
    return {
      user: null,
      isAvalibel: false,
      headers: [
        { text: "Image", value: "image", sortable: false },
        { text: "Product Name", value: "name", sortable: false },
      ]
    };
 computed: {
    ...mapGetters(["carts"])
  },

sml-sgr · Accepted Answer · 2018-08-22 06:25:59Z

1

During template compilation, the compiler can transform certain attributes, such as src URLs, into require calls, so that the target asset can be handled by webpack. For example, <img src="./foo.png"> will attempt to locate the file ./foo.png on your file system and include it as a dependency of your bundle.

so, for dynamic attribute src,

<td> <img :src="require('./assets/products-images/' +props.item.name)"> </td>

edited Aug 22, 2018 at 6:25

answered Aug 21, 2018 at 16:21

sml-sgr

9128 silver badges9 bronze badges

Comments

gil · Accepted Answer · 2018-08-22 12:43:02Z

0

Actually there are many ways you can use to insert image inside your Vue app/template:

1) (This is what you need for your code) Using require function actually this is going to be handled by the webpack and map the image to it's resource.

<img :src="require('./assets/products-images/' + props.item.name)">

please follow the below github discussion for more explanation:

https://github.com/vuejs-templates/webpack/issues/126

2) Another way read the image as base64 from the server and handle that inside your Vue app:

<img v-bind:src="'data:image/jpeg;base64,'+imageBytes" />

edited Aug 22, 2018 at 12:43

gil

1,34813 silver badges20 bronze badges

answered Aug 22, 2018 at 2:01

fouzeddin

11 silver badge1 bronze badge

Comments

mjw · Accepted Answer · 2021-10-11 05:39:05Z

0

if you want to use your server images with axios and display them in the rows, this works too.

<template v-slot:item.image="{ item }">
    <img v-bind:src="`/${item.image}`" style="width: 50px; height:50px">
    </v-img>
</template>

edited Oct 11, 2021 at 5:39

answered Oct 7, 2021 at 13:35

mjw

212 bronze badges

Collectives™ on Stack Overflow

Vue + Vuetify data table first column image

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related