Reference rootURL / any absolute path in hbs

Question

The ember-cli-generated index.html file includes this line

<script src="{{rootURL}}assets/vendor.js"></script>

and rootURL is replaced with respective the value from environment.js (just '/' in develompent).

Now I want to include an icon in a component (in fact, a template used only with partial) used in different routes (also at different nesting levels), but

<img src="{{rootURL}}assets/img/some_logo.svg">

just does not do the trick -- rootURL is empty, as is any other string else defined in environment.js.

I guess I could create a class file, import ENV from '../config/environment' and defined rootURL: ENV.rootURL, but surely ember does not expect me to do this whereever I want to include anything from my assets folder, does it?

Answer 1

Option 1: reopen Controller/Component classes

The simplest way is to reopen to add a property to all Controllers/Components. If you do this, you can use rootURL in any template with no other changes required.

import Ember from 'ember';
import ENV from '../config/environment'

Ember.Controller.reopen({
  rootUrl: ENV.rootURL,
});

Ember.Component.reopen({
  rootUrl: ENV.rootURL,
});

Option 2: Controller/Component inheritance

If you'd like to limit the scope of the change you can you can define a rootURL attribute in a base controller/component like application.js:

import ENV from '../config/environment'

export default Ember.Controller.extend({
  rootURL: ENV.rootURL,
});

Then in your other controllers/components, extend that base class and rootUrl will work in the corresponding templates:

import ApplicationController from 'application';

export default ApplicationController.extend({
  // controller definition
});

Option 3: Controller/Component Mixin

Instead of using inheritance, you can mixin this functionality to every Controller or Component that you want to have rootURL. Start by defining the Mixin:

// mixins/with-root.js
import Ember from 'ember';
import ENV from '../config/environment';

export default Ember.Mixin.create({
  rootURL: ENV.rootURL,
});

Use the Mixin in any Component/Controller where you want to use rootURL in the template:

import Ember from 'ember';
import WithRootMixin from '../mixins/with-root';

export default Ember.Controller.extend(WithRootMixin, {
  // controller definition
});

Answer 2

If your rootURL is just / also in production environment you can modify your image tag as:

<img src="/assets/img/some_logo.svg">

Otherwise I suppose you should use prepend option for broccoli-asset-rev but I've never tried that:

var app = new EmberApp(defaults, {
  // Add options here
  fingerprint: {
    prepend: 'https://cdn.example.com/'
  }
});

Official blog post regarding baseURL deprecation: http://emberjs.com/blog/2016/04/28/baseURL.html