title: Vuejs 2 bind image src
body: <p>I have a table with multiple rows and a <code>&lt;td&gt;</code> loading a dynamic url image using Vuetify</p>
  
  <pre><code>&lt;v-data-table :headers="headers" :items="items"&gt;
    &lt;template slot="items" scope="props"&gt;
        &lt;td&gt;
           &lt;img :src="getImgUrl(props.item.styleCode)" /&gt;
        &lt;/td&gt;
    &lt;/template&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>checkImage(imageSrc, good, bad) {
     let img = new Image();
     img.onload = good;
     img.onerror = bad;
     img.src = imageSrc;
  },
  getImgUrl(styleCode) {
    var image = 'http://192.168.1.19/Images/ClassImages/' + styleCode + '.png';
  
    this.checkImage(image,
    function () {
       return 'http://192.168.1.19/Images/ClassImages/' + styleCode + '.png';
    }, function () {
       return 'http://192.168.1.19/Images/ClassImages/default.png';
    });
  }
  </code></pre>
  
  <p>This return nothing.
  What are I doing bad?</p>
  
  <p>Edit: This is to load an external image and if doesn't exist load a default image</p>