asset-map

asset-map.js

// app/initializers/asset-map.js
import Ember from 'ember';

export function initialize(application) {
  let assetMap = Ember.Object.extend();

  application.register('impact:assets', assetMap);
  application.inject('component:i18n-image', 'assets', 'impact:assets');
}

export default {
  name: 'asset-map',
  initialize
};

// app/instance-initializers/asset-map.js
import Ember from 'ember';
import config from 'app/config/environment';

export function initialize(appInstance) {
  const getAssetMap = new Ember.RSVP.Promise((resolve, reject) => {
    const env = config.environment;
    if (env === 'development' || env === 'test') {
      resolve();
    } else {
      Ember.$.getJSON('assetMap.json', resolve).fail(reject);
    }
  });

  let map = appInstance.lookup('impact:assets');
  return getAssetMap.then((assets) => {
    map.reopen({
      assetMap: assets,
      resolve: function(name) {
        return assets.assets[name];
      }
    });
  });
}

export default {
  name: 'asset-map',
  initialize
};

// app/components/i18n-image.js
import Ember from 'ember';
import config from 'app/config/environment';

export default Ember.Component.extend({
  i18n: Ember.inject.service(),

  file: null,
  altText: '',
  styles: '',
  dataTest: '',

  isLocal: Ember.computed('config', function() {
    const env = config.environment;
    return env === 'development' || env === 'test';
  }),

  // build source - depending on environment
  src: Ember.computed('file', 'i18n.locale', 'isLocal', function() {
    const locale = this.get('i18n.locale');
    const name = this.get('file');

    // for non-production like builds - ignore cdn, fingerprinting, etc.
    if (this.get('isLocal')) {
      return `/images/${locale}/${name}`;
    }

    // asset map is loaded in: instance-initializers/asset-map
    const assets = this.assets;
    const path = `images/${locale}/${name}`;
    const cdn = config.APP.cdn;
    const mapped = assets.resolve(path);

    return `${cdn}${mapped}`;
  })
});

// app/templates/components/i18n-image.hbs
<img src={{src}} ... />

// asset-map.json
{
  "images/en/something.png": "somethingXYZ12341249158197.png",
  "images/es/something.png": "something1234aaqwerasdflla.png"
}