Question

我有一个包含多行的表格，<td>使用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>

然后

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

这没有回报。我做得不好？

编辑：这是加载外部图像，如果不存在则加载默认图像

Answer 1

您没有在getImgUrl方法中返回任何内容，这意味着您没有将src属性绑定到任何内容。

尝试设置src然后直接在@error元素上使用img侦听器来处理失败加载事件会更加简单：

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>

Vuejs 2绑定图像src

1 个答案: