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?

davegson · Accepted Answer · 2015-03-05 17:04:20Z

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.

edited Mar 5, 2015 at 17:04

davegson

8,3515 gold badges55 silver badges72 bronze badges

answered Aug 25, 2013 at 11:15

kal

9291 gold badge5 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

zykadelic Over a year ago

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.

Haris Krajina Over a year ago

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.

Nadeem Yasin Over a year ago

No such feature: user-env-compile

ahnbizcad Over a year ago

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/

Evgenia Karunus Over a year ago

@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?

|

Kick Buttowski · Accepted Answer · 2016-05-20 02:48:13Z

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.

edited May 20, 2016 at 2:48

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Feb 3, 2015 at 11:09

Prabhakar--PK

6,8743 gold badges43 silver badges51 bronze badges

6 Comments

Jason Swett Over a year ago

Yes!!! Nothing else worked for me but this did (setting config.assets.compile to true).

BV45 Over a year ago

Yes this worked for me too! Thanks! Configuring: config.assets.compile = true

Jubl Over a year ago

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.

Luminusss Over a year ago

40 posts later, you finally answered my question. Thank you!

Aboozar Rajabi Over a year ago

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?

|

Kick Buttowski · Accepted Answer · 2016-05-20 02:43:32Z

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.

edited May 20, 2016 at 2:43

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Sep 20, 2013 at 15:06

brad

1,6952 gold badges16 silver badges23 bronze badges

Comments

Percevalve · Accepted Answer · 2014-02-01 17:14:50Z

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.

answered Feb 1, 2014 at 17:14

Percevalve

1311 silver badge2 bronze badges

3 Comments

Brad Griffin Over a year ago

This worked for me as well. I originally had: background:url(file.png) Changing it to background:image-url('file.png') did the trick.

samuelkobe Over a year ago

this is the real solution.

stringRay2014 Over a year ago

i originally had background-image: image-url('file.jpg') and it sometimes worked but this works all the time :D

alightholder · Accepted Answer · 2014-11-07 17:25:48Z

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

answered Nov 7, 2014 at 17:25

alightholder

1158 bronze badges

Comments

Batz · Accepted Answer · 2015-11-02 13:38:31Z

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.

answered Nov 2, 2015 at 13:38

Batz

3721 gold badge6 silver badges16 bronze badges

1 Comment

colincr Over a year ago

As others have stated, config.assets.compile = true is not suitable for production.

Jorge Diaz · Accepted Answer · 2015-04-12 01:04:24Z

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

answered Apr 12, 2015 at 1:04

Jorge Diaz

1011 silver badge3 bronze badges

Comments

user2903934 · Accepted Answer · 2016-05-09 22:03:04Z

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

Community · Accepted Answer · 2017-05-23 10:31:27Z

-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

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 19, 2013 at 22:28

Tzu ng

9,25414 gold badges69 silver badges106 bronze badges

2 Comments

brad Over a year ago

that worked initially but after another recompile and another reload it broke

Tzu ng Over a year ago

@brad can you post your product configuration ?

Collectives™ on Stack Overflow

Rails 4 images not loading on heroku

9 Answers 9

11 Comments

6 Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

11 Comments

6 Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related