Vuejs 2绑定图片src

Question

我有使用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> 

多行和<td>加载动态链接图像表，然后

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，然后直接在img元素上使用@error侦听器处理程序加载失败的情况：

new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    getImgUrl(i) { 
 
     if (i === 4) { 
 
     \t 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>