Cambia icona collegamento interrotto in Ember

Question

Ho provato le solite cose per cambiare le icone dei collegamenti interrotti (vedi sotto), ma non sembrano funzionare nella mia app Ember.

Attualmente il modello recupera i dati da un'API esterna. Uno dei pezzi di dati è un url di collegamento. Questo URL di collegamento (product_link) è inserito nel modello, in particolare a questo punto:

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

Questo fa parte di un manubrio {{#each}} ciclo. Molti dei link si riferiscono agli URL morti e non ho un modo per correggere gli URL stessi in questo momento. Mi piacerebbe sostituire il collegamento generico di icone interrotte con uno dei miei. Come posso fare questo?

Le cose che ho provato:

<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 

qualche suggerimento?

Answer 1

È possibile creare un componente come @kaungst menzionato, Di seguito è riportato il codice per un componente che ha un altro attributo errorSrc che verrà visualizzato se lo src non è caricato.

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

soluzione Blessenm era grande, ma modifica il modello stesso. Non volevamo farlo, quindi abbiamo creato un componente chiamato 'safe-image' che aggiunge una classe 'spezzata' all'immagine. Con quella classe su immagini rotte possiamo usare css per rimuovere o cambiare l'immagine rotta.

{{safe-image src=product_link}} 

con questo codice componente: importazione Ember da 'brace';

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

E ha aggiunto questo css per rimuovere l'immagine del tutto o sostituirlo con uno di nostra scelta:

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

soluzioni di Dmitri Lupo Entrambi di Blessenm funzionano davvero bene. Assicurati solo che il componente non sia stato distrutto prima di impostare la proprietà nel callback dell'errore.

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