title: Vue + Vuetify data table first column image
body: <p>I am using <strong>Vue + Vuetify</strong> and I am trying to add image in the first column.</p>
  
  <blockquote>
    <p>Table Template Code</p>
  </blockquote>
  
  <pre><code>&lt;v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    light
  &gt;
    &lt;template slot="items" slot-scope="props"&gt;
      &lt;td&gt;&lt;img :src="props.item.name" style="width: 50px; height: 50px"&gt;&lt;/td&gt;
      &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
      &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
      &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
      &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
      &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
    &lt;/template&gt;
    &lt;v-alert slot="no-results" :value="true" dir="rtl" color="error" icon="warning"&gt;
      {{ PRODUCTS_TABLE_TEXT.NO_RESULT }} "{{ search }}"
    &lt;/v-alert&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  
  <blockquote>
    <p>Table Script Code</p>
  </blockquote>
  
  <pre><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%'
        },
      ]
    }
  }
  </code></pre>
  
  <blockquote>
    <p>What I have tried to do</p>
  </blockquote>
  
  <p>I have tried to add the <strong>HTML image code</strong> in the <strong>name</strong> variable like  this:</p>
  
  <pre><code>name: '&lt;img src="./../../assets/products-images/1.jpg" style="width: 50px; height: 50px"&gt;'
  </code></pre>
  
  <p>But it just printed the HTML as a text and did not render it.</p>