I've tried the usual things to change the broken link icons (see below), but they don't seem to be working in my Ember app.

Currently, the model fetches the data from an external API. One of the pieces of data is a link url. This link url (product_link) is inserted into the template, specifically at this point:

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

This is part of a handlebars {{#each}} loop. Several of the links refer to dead URLs and I don't have a way to fix the URLs themselves at this moment. I'd like to replace the generic broken icon link with one of my own. How can I do this?

Things I've tried:

<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

Any suggestions?

I've tried the usual things to change the broken link icons (see below), but they don't seem to be working in my Ember app.

Currently, the model fetches the data from an external API. One of the pieces of data is a link url. This link url (product_link) is inserted into the template, specifically at this point:

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

This is part of a handlebars {{#each}} loop. Several of the links refer to dead URLs and I don't have a way to fix the URLs themselves at this moment. I'd like to replace the generic broken icon link with one of my own. How can I do this?

Things I've tried:

<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

Any suggestions?

• javascript
• image
• ember.js

• 1 I'm still learning how to use them, but this seems like a job for a ponent. emberjs./guides/ponents – kaungst Commented Nov 24, 2014 at 11:59

3 Answers 3

You can create a ponent like @kaungst mentioned, Below is the code for a ponent that has another attribute errorSrc which will be shown if the src isn't loaded.

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}}

Blessenm's solution was great, but it modifies the model itself. We didn't want to do that, so we made a ponent called 'safe-image' which adds a class 'broken' to the image. With that class on broken images we can use css to remove or change the broken image.

{{safe-image src=product_link}}

with this ponent code: import Ember from '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();
  } 
});

And added this css to either remove the image altogether or replace it with one of our choosing:

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

Both Blessenm's Dmitri Wolf's solutions work really well. Just make sure that the ponent has not been destroyed before setting the property in the error callback.

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