5

The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?

Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?

chopper
  • 6,649
  • 7
  • 36
  • 53
  • Out of curiosity what is your use case? What are you trying to do? – Patsy Issa Feb 17 '15 at 15:06
  • In this case I am using a Google Maps API plugin that gets passed an image path to display on the map. I may be able to work around it via CSS, but I am also just generally curious on how this would work. – chopper Feb 17 '15 at 17:56
  • Wouldn't you be passing this path value into the component in your template? Or are you saying this value would be different, and would have to be passed in programmatically? – yuяi Feb 17 '15 at 22:33
  • Yes, programmatically – chopper Feb 17 '15 at 22:38

2 Answers2

3

I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg

enter image description here

Works great

enter image description here

UPDATE

One picture is worth a thousand words... :)

enter image description here

Kalman
  • 8,001
  • 1
  • 27
  • 45
  • Yes, that works in development, but I don't think the asset path will get fingerprinted correctly when compiling - will it? – chopper Feb 18 '15 at 05:22
  • Only one way to find out :) – Kalman Feb 18 '15 at 09:28
  • Yes, but what if the image is also fingerprinted? In that case the asset path in the JavaScript file wouldn't update – chopper Feb 18 '15 at 22:35
  • True. To that point, it's kinda interesting how pretty much everything else is fingetprinted... :) – Kalman Feb 18 '15 at 22:39
  • I think that has to do with the default settings of ember-cli. If you explicitly include the image files in the Brocfile (as per the documentation of broccoli-asset-rev), the fingerprinting works as expected. – chopper Feb 18 '15 at 22:53
1

I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.

chopper
  • 6,649
  • 7
  • 36
  • 53