Inject fingerprinted assetMap.json file into your app and provide initializer, service, and helper to dynamically reference fingerprinted assets.
ember install ember-cli-ifa
Enable addon in environment.js
for specific environment.
module.exports = function(environment) {
var ENV = {
...
ifa: {
enabled: true
}
...
};
Configure fingerprinting in ember-cli-build.js
. Refer to the documentation of ember-cli for asset-compilation
fingerprint: {
enabled: true, // set to true only in required environments
generateAssetMap: true,
fingerprintAssetMap: true
}
If name
is tomster-under-construction
:
<img src={{asset-map (concat "assets/" name ".png")}} />
then it will generate something like assets/tomster-under-construction-da524c8bc9283f759ae640b68db81f24.png
base on assetMap.json.
import Component from 'ember-component';
import service from 'ember-service/inject';
export default Component.extend({
assetMap: service('asset-map'),
key: null, // key passed as 'tomster-under-construction'
// result will be assets/tomster-under-construction-da524c8bc9283f759ae640b68db81f24.png
image: computed('key', function() {
return this.get('assetMap').resolve(`assets/${this.get('key')}.png`);
})
});
If prepend
option is added in fingerprint configuration block, it will be prepended into
generated asset path in the index.html.
// ember-cli-build.js
// ...
var app = new EmberApp(defaults, {
fingerprint: {
prepend: '/blog/'
}
});
/blog
will be prepended to the assetMap file path in the index.html.