Rails 4 images not loading on heroku
I have spent the better part of the day trying to get images to load on my heroku app. Everything I try works locally, but not after being deployed to heroku.
I have png files saved in the images folder under my assets. I am referencing these images with syntax in my css such as;
#signin {
background: url(<%= asset_path 'sf.png' %>);
background-size: 100%;
}
In heroku when I inspect the background the assets/sf.png link is there but when you click it it shows a broken image, suggesting it did not load properly.
I've tried toggling config.serve_static_assets = false in the production.rb file between true and false and neither works.
I also have
group :production do
gem 'pg'
gem 'rails_12factor'
end
Precompile is always successful.
Rails 4. Any ideas on what else to try?
I needed to combine several solutions to make this work, here is what I did:
Gemfile
gem 'rails_12factor', group: :production
in my Heroku console
heroku labs:enable user-env-compile -a yourapp
production.rb
config.serve_static_assets = true
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.compile = true
I didn't need to precompile the assets locally.
You need to do two things to resolve it. First, change these two lines from false to true in production.rb file.
config.assets.compile = true
config.assets.digest = true
Second, if you've syntax like this for your images
background: url("imgo.jpg")
Change it to
background: image-url("image.jpg")
I hope it does your job.
Another issue, I was having with this was that I was precompiling my assets locally, prior to loading it to heroku. This requires you to follow a different set of steps, which can be found below. If you precompile your assets locally, you must follow these steps or any updates you made to your assets folder will not be reflected in prod.
https://devcenter.heroku.com/articles/rails-asset-pipeline
RAILS_ENV=production bundle exec rake assets:precompile
commit and push to server.