Bildquelle ändern (zweimal), wenn src nicht existiert

Question

Ich habe gerade angefangen, Vue in der Front-End meiner Website zu verwenden. In einem meiner Vue-Komponenten I mit einem bestimmten Pfad ein Bild wollen:

<img src="path/example/with/vue/var"> 

Nun ist es das, was ich tun möchte:

• Überprüfen Sie, ob die Datei im „Pfad/Beispiel/mit/vue/var“existiert
• Falls nicht: die src wechseln Sie in "another/path/mit/vue/var"
• überprüfen Sie, ob "andere/path/mit/vue/var" existieren
• Wenn nicht: C hange die src auf "default/path"

Ich habe bereits versucht onerror mit einer Funktion in der es zu benutzen. Aber das Problem ist, ich lade mehr als 100 Objekte mit ein paar Bildern für jedes Objekt. Wenn ich nur überprüfe, ob die Datei normal existiert (über Ajax oder mit einem XMLHttpRequest), ist die Performance komplett weg. Alle Objekte werden über eine JSON-Datei geladen.

Ich hoffe, dass Sie die Frage verstehen.

Answer 1

Ich schlage vor, Sie https://imagesloaded.desandro.com/

Sie verwenden kann verstehen, wenn der Weg auf diese Weise existieren

$('#container').imagesLoaded() 
    .always(function(instance) { 
    console.log('all images loaded'); 
    }) 
    .done(function(instance) { 
    console.log('all images successfully loaded'); 
    }) 
    .fail(function() { 
    console.log('all images loaded, at least one is broken'); 
    }) 

In der Fail-Funktion können Sie wieder machen imagesLoaded() für einen anderen Weg und so weiter

Answer 2

Herre eine einfache demo, müssen Sie den zweiten Versuch recurseve hinzufügen.

var img = new Image(); 

img.onload=function(){ 
    console.log('loaded!'); 
}; 
img.onerror = function(){ 
    console.log("error"); 
} 
img.src='something'; 

Answer 3

Eine einfache Möglichkeit, diese eine Komponente aus dem Objekt zu machen, wäre zu implementieren, die Sie in Ihrer v-for Schleife verwenden.

Dann können Sie einfach eine berechnete Eigenschaft verwenden, um die src Eigenschaft auf Ihrem Objekt zu überprüfen.

in diesem Fall, dass Sie tun:

const image = new Image() 

und dann die src etwa so:

image.src = <object>.src 

Nachdem Sie das src auf dem Image-Objekt festgelegt haben Sie dann, wenn Ihr bestimmtes Bild überprüfen könnten, hat mit onload geladen oder ist mit onerror ausgefallen.

ich per Scheck etwas ähnlich in meinem Code zu tun, wenn ein Bild geladen ist oder nicht, so kann ich das Platzhalter-Bild mit dem tatsächlichen geladenen Bild ersetzen:

setImagePlaceholder(hotel) { 
    this.$set(hotel, 'imgLoaded', false); 

    const image = new Image(); 
    image.src = hotel.thumbUrl; 

    image.onload =() => { 
     hotel.imgLoaded = true; 
    }; 
} 

Sie wissen nicht, wie ich es jedes machen könnte einfacher für dich.