javascript - EmberJS config prod img src url -

 ember      : 1.13.6  ember data : 1.13.7 

i need able set global property , use inside .hbs files. lets production need serve images server developing locally can severed relative project.

<img src="{{imgsrc}}/spinner.gif" alt="loading..."/> 

how can set global property or config , use inside .hbs files?

here able come seems work no idea if it's "good idea".

config/environment.js - set configurable imgsrc property envs

module.exports = function(environment) {   var env = {     //...      app : {       imgsrc: '/prod/path/to/assets/'     }      //...   };    if (environment === 'development') {     env.app.imgsrc = 'assets/images/';   } 

app.js - make imgsrc property available within app

import ember 'ember'; import resolver 'ember/resolver'; import loadinitializers 'ember/load-initializers'; import config './config/environment';  var app;  //...  app = ember.application.extend({   moduleprefix: config.moduleprefix,   podmoduleprefix: config.podmoduleprefix,   resolver: resolver,   imgsrc: config.app.imgsrc });  //...  export default app; 

----- create component called img-src -----

templates/components/img-src.hbs

<img src="{{imgsrc}}{{image}}" alt="{{alt}}"/> 

components/img-src.js

import ember 'ember';  export default ember.component.extend({    tagname: 'div',    imgsrc: myapp.imgsrc }); 

hbs component usage

{{img-src image="spinner.gif" alt="loading..."}} 

does took right?