CODEWITHSUNDEEP
javascriptvuejs2
Yuri Morales
Yuri Morales

Reputation: 2498

Vuejs 2 bind image src

I have a table with multiple rows and a <td> loading a dynamic url image using Vuetify

<v-data-table :headers="headers" :items="items">
  <template slot="items" scope="props">
      <td>
         <img :src="getImgUrl(props.item.styleCode)" />
      </td>
  </template>
</v-data-table>

and then

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';
  });
}

This return nothing. What are I doing bad?

Edit: This is to load an external image and if doesn't exist load a default image

Upvotes: 0

Views: 6593

Answers (1)

thanksd
thanksd

Reputation: 55644

You're not returning anything in the getImgUrl method, meaning you're not binding the src attribute to anything.

It'd be much simpler to attempt to set the src and then use an @error listener directly on the img element to handler the event of a failed load:

new Vue({
  el: '#app',
  methods: {
    getImgUrl(i) {
      if (i === 4) {
      	return 'http://thisonewontwork';
      }
      return 'http://placehold.it/120x120&text=image' + i;
    },
    onError(e) {
      let defaultURL = 'http://placehold.it/120x120&text=default';
      if (e.target.src !== defaultURL) {
        e.target.src = defaultURL;
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <template v-for="i in 4">
    <img :src="getImgUrl(i)" @error="onError">  
  </template>
</div>

Upvotes: 5

Related Questions