Ändern Sie das Symbol für defekte Links in Ember

Question

Ich habe versucht die üblichen Dinge zu ändern, die defekten Link-Icons (siehe unten), aber sie scheinen nicht in meiner Ember App zu arbeiten.

Derzeit ruft das Modell die Daten von einer externen API ab. Eines der Datenelemente ist eine Link-URL. Dieser Link URL (product_link) in die Vorlage eingelegt, und zwar an diesem Punkt:

<img {{bind-attr src=product_link}} /> 

Dieser Teil eines Lenkers {{#each}} Schleife ist. Einige der Links beziehen sich auf tote URLs und ich habe momentan keine Möglichkeit, die URLs selbst zu reparieren. Ich möchte den generischen gebrochenen Symbollink durch einen eigenen ersetzen. Wie kann ich das machen?

Dinge, die ich versucht habe:

<img {{bind-attr src=favorite.product_image onError="this.onerror=null;this.src='/img/error.png';"}} /> 
//still shows the standard broken image icon 

-

$('img').error(function(){ 
    $(this).attr('src', 'img/error.png'); 
}); 
//nothing happens if I include this in a called javascript file 

Irgendwelche Vorschläge?

Answer 1

Sie können eine Komponente wie @kaungst erwähnt, unten ist der Code für eine Komponente, die ein anderes Attribut errorSrc hat, die angezeigt wird, wenn die src nicht geladen ist.

Here is the working demo.

App.GracefulImageComponent = Ember.Component.extend({ 
    tagName: 'img', 
    attributeBindings: ['src', 'errorSrc'], 

    didInsertElement: function() { 
     this.$().on('error', function() { 
      this.set('src', this.get('errorSrc')); 
     }.bind(this)); 
    }, 

    willDestroyElement: function(){ 
     this.$().off(); 
    } 
}); 

{{graceful-image src=item.image errorSrc=../model.errorImage}} 

Answer 2

Blessenm Lösung war groß, aber es ändert das Modell selbst. Wir wollten das nicht machen, also haben wir eine Komponente namens 'safe-image' erstellt, die dem Bild eine Klasse 'kaputt' hinzufügt. Mit dieser Klasse auf defekten Bildern können wir CSS verwenden, um das defekte Bild zu entfernen oder zu ändern.

{{safe-image src=product_link}} 

mit diesem Komponentencode: import Ember von 'ember';

App.SafeImageComponent = Ember.Component.extend({ 
    tagName: 'img', 
    attributeBindings: ['src'], 
    classNameBindings: ['isBroken:broken'], 

    isBroken: false, 

    didInsertElement: function() { 
    this.$().on('error', function() { 
     this.set('isBroken', true); 
    }.bind(this)); 
    }, 

    willDestroyElement: function(){ 
    this.$().off(); 
    } 
}); 

Und hinzugefügt, um diese CSS entweder das Bild sogar komplett löschen oder es mit einem unserer Wahl ersetzen:

img.broken { 
    /* use this to show nothing: */ 
    display: none; 
    /* or use this instead to replace the image: */ 
    content:url("http://imgur.com/SZ8Cm.jpg"); 
} 

Answer 3

Sowohl Blessenm Dmitri Wolf-Lösungen wirklich gut funktionieren. Stellen Sie nur sicher, dass die Komponente nicht zerstört wurde, bevor Sie die Eigenschaft im Fehlerrückruf festlegen.

didInsertElement: function() { 
     this.$().on('error',() => { 
     if (!this.get('isDestroyed') { 
      this.set('src', this.get('errorSrc')); 
     } 
     }); 
    },