Because of things outside of our control as developers, images don’t always load and the design suffers. This occurs because of a connectivity issues, or when an image path is incorrect or points to a resource that is no longer available.

In the interest of graceful failure, I include a default image as a backup for images that don’t load.

components/default-img.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'img',
    attributeBindings: ['src'],

    didInsertElement: function(){
        var _this = this;

        // With jQuery
        this.$().on('load', function(evt){
            return _this.imageLoaded(evt);
        }).on('error', function(evt){
            return _this.errorLoading(evt);
        });

        // Without jQuery / for Mobile
        /*
        var domRef = document.getElementById(this.get('elementId'));
        domRef.addEventListener('load', function (evt) {
            return _this.imageLoaded(evt);
        }, false);
        domRef.addEventListener("error", function (evt) {
            return _this.errorLoading(evt);
        }, false);
        */
    },

    willDestroyElement: function(){
        this.$().off('load', 'error');
    },

    imageLoaded: function(event){
        console.log("Image Loaded");
    },

    errorLoading: function(event){
        this.set('src', this.get('defaultImg'));
    }

});

Use:

Controller:

// path to the Expected image
var img = data.imgPath; 

// path to Default / backup image
// change this to match design requirements or default image path.
var defaultImg = 'http://placehold.it/190x200'; 

View:

{{default-img src=img defaultImg=defaultImg}}