CODEWITHSUNDEEP
cssruby-on-railsherokuruby-on-rails-4asset-pipeline
Alex
Alex

Reputation: 631

Heroku does not serve background image, localhost does?

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?

Upvotes: 11

Views: 5866

Answers (5)

Daniel
Daniel

Reputation: 101

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

Upvotes: -2

Anand
Anand

Reputation: 3770

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.

Upvotes: 4

Fellow Stranger
Fellow Stranger

Reputation: 34113

With the background property and SASS:

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

Upvotes: 0

Alex
Alex

Reputation: 631

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.

Upvotes: 12

Brock90
Brock90

Reputation: 814

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

Upvotes: 25

Related Questions