Link rootURL / any absolute path in hbs

Question

The index.html file created by ember-cli includes this line

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

and rootURLis replaced by the corresponding value from environment.js(only '/'in development).

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

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

it just doesn't do the trick - it's rootURLempty, like any other line defined in environment.js.

I think I could create a class file import ENV from '../config/environment'and define rootURL: ENV.rootURL, but, of course, ember does not expect me to do this if I want to include something from my resource folder, right?

Answer 1

Option 1: reopenController / Component Classes

The easiest way is to reopenadd the property to all controllers / components. If you do this, you can use rootURLin any template without any changes.

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

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

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

Option 2: Inheriting the controller / component

If you want to limit the scope of changes, you can define the attribute rootURLin the base controller / component, such as application.js:

import ENV from '../config/environment'

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

Then in your other controllers / components extend this base class and rootURLwill work in the corresponding templates:

import ApplicationController from 'application';

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

Option 3: Controller / Mixin Component

, rootURL. Mixin:

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

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

Mixin /, rootURL :

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

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

Answer 2

rootURL / , :

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

, , prepend broccoli-asset-rev, :

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

baseURL: http://emberjs.com/blog/2016/04/28/baseURL.html