Heroku does not serve background image, localhost does?

Question

I have a problem with my rails application (Rails 4.0.0.rc2, ruby 2.0.0p195).

The behavior is weird: My localhost shows the background picture properly, Heroku doesn't.

In the heroku logs I can see the following error:

ActionController::RoutingError (No route matches [GET] "/assets/piano.jpg"):

I have created the background image by inserting the following code in my custom.css.scss:

.full { 
  background: image-url("piano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And I am triggering this with the following code, which I have on my static page:

<body class="full">
....
</body>

I already have the gem running in production:

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

In production.rb I have set the following setting to true:

config.serve_static_assets = true

However, the image is not being shown. Can you help me out?

stackoverflow.com/questions/15257555/… You may refer to this question. — Nikita Singh
– Nikita Singh, Commented Oct 5, 2013 at 18:23
Yes. However, the problem is not based on the referencing I chose! It has to do with the precompilation of the assets. — Alex
– Alex, Commented Oct 5, 2013 at 21:16

Brock90 · Accepted Answer · 2013-10-05 17:59:03Z

25

Make sure you set these in your production.rb file

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

answered Oct 5, 2013 at 17:59

Brock90

8141 gold badge8 silver badges13 bronze badges

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

3 Comments

IIllIIll Over a year ago

This was my issue. After nearly bashing my head in over the past week I'd like to say thank you!

Recomer Over a year ago

Can you explain why did this solution worked? @Brock90

Wylliam Judd Over a year ago

Note that config.serve_static_assets has changed to config.public_file_server. Also, thanks for this answer. I just needed config.assets.compile even though I precompiled my assets.

Alex · Accepted Answer · 2014-01-27 18:34:59Z

12

I have found the solution for the issue myself:

RAILS_ENV=production bundle exec rake assets:precompile

After running this command in my console, the picture was shown properly.

Previously I had only tried to run:

rake assets:precompile

That alone didn't help. You have to address the production environment in your command.

I hope this serves as a reference for other users.

edited Jan 27, 2014 at 18:34

answered Oct 5, 2013 at 21:16

Alex

6311 gold badge8 silver badges27 bronze badges

Comments

Anand · Accepted Answer · 2015-01-20 02:56:50Z

4

I needed a combination of the other answers to work for me.

I needed to use @Brock90's production config settings as well as precompile the assets as Alex mentioned.

answered Jan 20, 2015 at 2:56

Anand

3,7804 gold badges37 silver badges67 bronze badges

Comments

Fellow Stranger · Accepted Answer · 2014-11-27 17:24:06Z

0

With the background property and SASS:

background: image-url("my_image.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

answered Nov 27, 2014 at 17:24

Fellow Stranger

34.4k38 gold badges181 silver badges251 bronze badges

Comments

Daniel · Accepted Answer · 2018-02-25 20:34:13Z

-2

Don't have your pictures in sub-directories within the images/ directory

If anyone is still having trouble with this. I was looking everywhere for a solution and I thought I tried everything. For my case I had instances like

background-image: url("containers/filled/Firkin-Keg-5-Gallons_filled.png");

So I had folders within images. This worked fine for localhost, but it would not work on heroku.

background-image: url("Firkin-Keg-5-Gallons_filled.png");

no more sub-directories.

EDIT This is wrong. Refer to comments below for proper usage

edited Feb 25, 2018 at 20:34

answered Jun 10, 2017 at 21:22

Daniel

1011 silver badge4 bronze badges

2 Comments

Eyeslandic Over a year ago

This is dead wrong. Sub-folders work perfectly. You must however use it correctly: background-image: url(image_path("containers/filled/Firkin-Keg-5-Gallons_filled.png")) and make sure your stylesheet file has the ending .scss

Dylan Pierce Over a year ago

Use the built in asset pipeline SCSS helpers to link to your pipeline compiled assets. There are a bunch but each one links to the corresponding /app/assets path: image-url, font-url

Collectives™ on Stack Overflow

Heroku does not serve background image, localhost does?

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related