Vue + Vuetify data table first column image - vue.js

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.

Answer 1

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"])
},

Answer 2

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>

Answer 3

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

Answer 4

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>