65

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?

9 Answers 9

92

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.

11
  • 23
    I already had the gem, but other than that, config.assets.compile = true sufficed for me. Running Ruby 2.0, Rails 4.0, on EU Cedar stack.
    – zykadelic
    Nov 26, 2013 at 10:03
  • 1
    This is dirty fix since you will have runtime compiling due to config.assets.compile = true. It will work but it is not proper production setup. May 6, 2014 at 7:00
  • 6
    No such feature: user-env-compile May 28, 2014 at 5:58
  • 2
    Don't compile assets true on production. that makes production slow. Instead create config/initializers/assets.rb, and add these to it, so that rails production recognizes vendor and lib precompiled assets. Rails.application.config.assets.precompile << /\.(?:png|jpg|jpeg|gif)\z/ Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
    – ahnbizcad
    Nov 7, 2014 at 9:55
  • 3
    @gwho, this doesn't seem to work for me. putting config.assets.precompile += %w( .svg .eot .woff .ttf .png .jpg .gif) in '/config/application.rb' helped me. will this solution slow down the production? Dec 29, 2014 at 7:43
57

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.

6
  • 4
    Yes!!! Nothing else worked for me but this did (setting config.assets.compile to true). Jul 27, 2015 at 12:43
  • Yes this worked for me too! Thanks! Configuring: config.assets.compile = true
    – BV45
    Mar 21, 2016 at 18:38
  • Not sure why this isn't top comment. None of the other answers worked for me. You just saved me from wasting hours on this. I didn't need to mess with anything else except assets.compile.
    – Jubl
    Jun 2, 2016 at 19:00
  • 1
    40 posts later, you finally answered my question. Thank you!
    – Luminusss
    Jun 6, 2016 at 22:47
  • When I set config.assets.compile = false, I can see my app without loading any of the css, image, and ... files (They're not accessible). When I change it to true, I cannot see my website, but all files are accessible via their own link!! Do you have any idea to solve it? Jun 14, 2016 at 23:53
27

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.

0
13

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.

3
  • This worked for me as well. I originally had: background:url(file.png) Changing it to background:image-url('file.png') did the trick. Nov 4, 2014 at 3:06
  • this is the real solution.
    – samuelkobe
    Apr 14, 2015 at 19:12
  • i originally had background-image: image-url('file.jpg') and it sometimes worked but this works all the time :D Feb 5, 2016 at 11:03
3

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

2

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.

1
  • As others have stated, config.assets.compile = true is not suitable for production.
    – colincr
    Jan 7, 2019 at 18:09
1

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

1

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

-1

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

2
  • that worked initially but after another recompile and another reload it broke
    – brad
    Aug 20, 2013 at 21:59
  • @brad can you post your product configuration ? Aug 21, 2013 at 7:13

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.