Skip to content
A template helper to keep your URLs relative to the app's rootURL.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-root-url

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.

Explanation

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.

Installation

ember install ember-root-url

Usage

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(),

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

Contributing

Installation

  • git clone <repository-url>
  • cd ember-root-url
  • yarn install

Linting

  • yarn lint:js
  • yarn lint:js --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • yarn test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.