Vuejs 2 bindet Bild src

Question

Ich habe eine Tabelle mit mehreren Zeilen und ein <td> ein dynamisches URL-Bild geladen Vuetify mit

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

und dann

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

Diese Rückkehr nichts. Was mache ich schlecht?

Edit: Dies ist ein externes Bild zu laden und wenn nicht vorhanden ein Standardbild laden

Answer 1

Sie sind nicht alles in der getImgUrl Methode zurückkehrt, das heißt, Sie sind nicht verbindlich das src Attribut zu nichts.

Es wäre viel einfacher sein, zu versuchen, die src zu setzen und dann direkt einen @error Zuhörer zur Verwendung auf dem img Element das Ereignis einer gescheiterten Last handler:

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>