Rails 4: How To Fix The Heroku Assets Not Found CSS Image Issue

So I uploaded my first Rails 4 project to Heroku only to find that none of my assets, including CSS and images were rendering.

While I found some solutions that fixed the CSS rendering, I had a hard time finding a solution that rendered my background image in this simple SASS code:

background: url(auth-icons.png) no-repeat 99px 99px;

According to this StackOverflow question about the same issue, heroku actually adds an identifier to all your image names to optimize cashing, so the CSS can’t find an image with that exact name.

The solution ended up being very simple. Just change the config.assets.compile option in your production.rb file to true:

# config/environments/production.rb
YOURAPPLICATION::Application.configure do
   
   # your config settings

   config.assets.compile = true

   # your other config settings
end

That should fix it!

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • Anonymous

    Are you Russian?

    • anan

      No, I’m not in a hurry.

  • fridgerator

    Its more of a workaround than a fix, I don’t usually like to let rails fallback to sing missed assets. Not sure why they broke this in rails 4 but its very annoying.

  • lozandier

    I had to find out this way the hard way the other way, but it’s actually very, very bad to use config.assets.compile = true; it’s very slow and that config is primarily meant to be used during development.

    It is not scalable at all. Also, the asset fingerprinting is a default action done by asset pipeline, not Heroku. rake assets:precompile will automatically do the same thing.

    With Rails 4, fingerprinting this way worked better than the old way with a variety of reasons the Guide goes into once they were updated throughout the beta releases of Rails 4

    Being a heavy Sass user, the problem seems to be w/ compass-rails and/or sass-rails since asset-path and image-path point to the correct paths but do not applythe fingerprinting. Since sass-rails and/or compass-rails

    I’m inclined to say assets:precompile needs to be avoided and perhaps using

    compass compile -e production –force

    in the context of Rails (using bundle exec?) will probably solve the problem, will try to do so this evening or Monday.

  • Alex

    config.assets.compile = true

    don’t that in production

  • Ben

    Actually, using background:image-url fixed this for me without having to alter config.assets.compile.