Rails 4 images not loading on heroku

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

I had a similar issue and I solved it with the following line in the custom.css.scss.. Tell me if this works for you.

background: image-url('sf.png')

Referencing the asset being done different ways depending if you are using ERB or Sass, see in the Ruby on Rails Guide .

Answer 5

I don't have the reputation to comment (yet) but it's important to note that the Heroku labs feature has been removed, so now you'll get a "No such feature: user-env-compile" error

More: https://github.com/Crowdtilt/CrowdtiltOpen/issues/251

Answer 6

Rails ('4.1.5') I had a similar issue of images not showing on Heroku but showing up locally. I am not using paperclip or carrierwave gems, I precompile locally and also using RAILS_ENV=production I push to github and it deploys fine to Heroku.

I solved the issue by having:

config.serve_static_assets = true
config.assets.compile = true
config.assets.js_compressor = :uglifier
config.assets.digest = true

// delete precompiled assets
bundle exec rake assets:clobber --trace
RAIL_ENV=production bundle exec rake assets:clobber --trace

copied images to public/assets from app/assets. then:

// tests should pass
bundle exec rake assets:precompile --trace
RAILS_ENV=production bundle exec rake assets:precompile --trace

git commit
git push

And it was running fine on Heroku.

Answer 7

I had a similar problem with showing just images. Being new to rails I did not know I could use:

<%= image_tag("fileName.png", alt: "File Name Fancy", size: "100x100")%>

Instead of traditional html.

The image_tag is explained in the rails api but I find its use is better explained here: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag

All I added to my app was this gem: gem 'rails_12factor', group: :production

As described in the heroku asset-pipeline documentation. https://devcenter.heroku.com/articles/rails-4-asset-pipeline

Answer 8

I tried many solutions too but i found an invaluable solution and explanation 1. Heroku looks for assets in the public folder and that means you have to pre-compile your assets but if you were like me someone looking for a way to precompile my assets when my development environment is set to gem sqlite and production set to pg then you would do this.

in your production.rb

config.serve_static_assets = true

if you do not have gem pg installed you need to comment it out and change your production environment to use gem sqlite and run this

RAILS_ENV=production bundle exec rake assets:precompile

when all assets have been precompiled, switch back to your default settings and git add .,commit, and push to heroku

Answer 9

The images won't be served as assets by default, only css and js. You should look into the answer of

Syed Ehtsham Abbas in this question Heroku does NOT compile files under assets pipelines in Rails 4