Heroku assets uploaded, but urls to images not updating

Question

I recently deployed my app to heroku and everything is working fine aside from images that are defined in jquery-raty. Basically this gem allows you to easily implement a rating system (visually).

When I push to heroku assets are precompiled and I can see that the images I've designated to work with jquery-raty are successfully compiled and there names are changed (ie, image.png becomes image-f96e0d1182b422c912116f08ac8f7d78.png). All is well - but I've found that when deployed to heroku this new name is not reflected. That is, the image is trying to be pulled from https://myapp.herokuapp.com/assets/image.png instead of https://myapp.herokuapp.com/assets/image-f96e0d1182b422c912116f08ac8f7d78.png .

This is my issue -- I have no clue at this point how to get the urls pointing correctly.

Has anyone else found a solution to this??

Thank you.

Answer 1

You're basically experiencing one of the pitfalls of using Rails' asset pipleline precompile feature, whereby your images & other media will be given a hash; and any references of those assets have to be dynamic to accommodate

The problem you have is that when you precompile your assets, the static links in your .css files only point to url(/assets/image.png) . However, what you really need is to have that link dynamically rendered, using the asset_path or asset_url helpers

The Solution Is SCSS

We had this problem (we use asset sync gem), and found the best way to solve it is to SCSS to dynamically render your asset paths. Here is some of our code:

#app/assets/stylesheets/application.css.scss (yes, you should change it)
@import 'layout/fonts';

#app/assets/stylesheets/layout/fonnts.css.scss
@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

See how we use asset_url ?

This gives rake the ability to define the new path to the asset on compile, not the old one; which means that when you run rake assets:precompile you'll get all the correct references.

Whenever we compile our assets, I would recommend using this pre-compile process:

rake assets:precompile RAILS_ENV=production

... and when you've uploaded to Heroku:

heroku run rake assets:precompile --app [your app]

Answer 2

If you are using Rails 4

The static assets are referenced without fingerprint. Hence the assets ends up in 404. Since Rails 4 the digest option is by default set to false. https://github.com/rails/rails/issues/11482

Though not a preferred solution, you can try having both digested and non-digested assets in you public folder.

This might do the task for you - https://github.com/alexspeller/non-stupid-digest-assets

You may want to see this as well https://github.com/rails/sprockets-rails/issues/49

Answer 3

Thanks @Rich Peck, @swap.nil, and others for responding to my question. After messing with this for several hours yesterday I decided to do what I should have done in the first place, which is read this page The Assets Pipeline

... essentially what @Rich Peck mentioned in terms of using dynamically rendered URLs was the key. To achieve this I simply had to change my .js.coffee files to .js.coffee.erb files, and use "<%= asset_path('my-image.png') %>" to render the appropriate URL for the file. Once I did that everything was working. I did not need to do anything in regard to manually precompiling assets - I'm still having heroku do this for me automatically.

Thanks again for everyone's support in figuring this out :)