A template helper to keep your URLs relative to the app's rootURL

Downloads in past


1011.0.12 years ago6 years agoMinified + gzip package size for ember-root-url in KB


This addon provides the root-url helper:
<img src={{root-url "images/hello.png"}} />

It's purpose is to make it easy to express a URL relative to your application's rootURL.


Because Ember apps handle their own routing, they need to know their own rootURL. This is configured in your config/environment.js.
If your app includes some assets, those assets will also be available under the rootURL.
If you want a portable way to refer to those assets, you need to construct their URLs relative to rootURL. Otherwise the links can break if you deploy your app under a new rootURL.


  • Ember.js v3.12 or above
  • Ember CLI v3.12 or above
  • Node.js v12 or above


ember install ember-root-url


If you have an image in your app's public/images/hello.png, you can link to it like:
<img src={{root-url "images/hello.png"}} />

Assuming you are using the default rootURL of /, it will render like:
<img src="/images/hello.png" />

And if you have a customized rootURL of "/my-app", it will render like
<img src="/my-app/images/hello.png" />

Of course it's fine to pass any value, it doesn't need to be a literal:
<img src={{root-url model.imageURL}} />

You can also build root-relative URLs in JavaScript using service:root-url:
export default MyComponent extends Component {
  rootUrl: service(),

  get helloUrl() {
    return this.rootUrl.build('images/hello.png')


See the Contributing guide for details.


This project is licensed under the MIT License.