CODEWITHSUNDEEP
javascriptherokuember.js
user3162553
user3162553

Reputation: 2859

Ember isn't loading some images in production

I have an Ember-cli 1.13 app that has a lot of images stored in the public directory. Now, it will correctly load all images except those in a particular component.

The component is called like this:

{{list-item url="list-url" name="List Name" price="240"}}

Internally, the component is this:

<a href="http://example.com/{{url}}">
  <img src="/{{url}}.png" alt='Picture of the {{name}}' />
  <p class="item-name">{{name}}</p>
  ...
</a>

When I build the application and launch to heroku the broken path is 

https://ridiculous-name-123123.herokuapp.com/list-item.png

Which is the same as the localhost path except with a different domain obviously.

All of the other images work when not used with components.

Where am I going wrong?

Upvotes: 4

Views: 1392

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

When you build with a production env your assets undergo something called fingerprinting.

What appears to be the problem here is that your "built" url links to the un-fingerprinted file, one solution would be to move these images into a folder and exclude them from being fingerprinted, in your ember-cli-build.js:

var app = new EmberApp({
  fingerprint: {
    exclude: ['myComponentImages/']
  }
});

A better solution would be to have the full url or pass a class that changes the image displayed since it looks like these are static assets and not user uploaded content.

Upvotes: 3

Related Questions