Stylesheets, images and javascript are not loading on heroku server in rails4

Question

Hello I have included following in my gemfile

group :production, :staging do
  gem 'rails_12factor'
end

and inmy stylesheets i have included images as mytest.css.scss

.abc{background: image-url('/assets/mobile/phone.png');}

in production.rb

config.serve_static_assets = true
config.assets.compile = true

and in herokurun bash I have rake assets:precompile also but still its not loading images , stylesheets and javascripts. Please guide me how to solve this issue

Answer 1

Try one of these:

background-image: image-url("logo.png")

background-image: asset-url("logo.png", image)

background-image: asset-url($asset, $asset-type)

background-image: asset-data-url("logo.png")

Answer 2

Sometimes, Heroku takes time to recognize new assets - we've found that if you restart the dyno after precompilation, it often loads them on refresh: heroku restart

You should accompany this with the referenced dynamic helpers (as per sadaf2605 's answer:

#app/assets/stylesheets/application.js
.element {
   background: asset_url("your_image_url.png");
} 

The other thing you need to do is precompile for production --

rake assets:precompile RAILS_ENV=production

---

Debug

It's tough to see what the issue might be; the main way we debug this is as follows:

1. On push, right-click on your app and view source
2. In the console , you'll probably see a series of 404 ( resource not found ) errors.
3. These errors will denote which files Rails is looking for - look for the fingerprints .

If the app is looking for fingerprinted files, it's a good sign (it means the files you have are incorrect). To resolve this, you should just precompile before sending to Heroku:

$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Fix"
$ git push heroku master

This will send the right files to Heroku.

If your app is not looking for the fingerprinted files, it means you have to reference them properly in your CSS. I think you already know about this (written above).