Heroku staging environment not deploying all images and CSS

Question

I have been struggling to have my Heroku staging environment mirror my local development environment. The first thing I am struggling with is my index page's slider image. It's being called with ERB in my index.html.erb file, but when I run bash and go into my heroku environment, the image isn't even there? Every other image from my assets/image folder is there except that one. All of my images are in assets/images. There are other subtleties such as different fonts and colours of progress bars that aren't being deployed properly. All of my css files are in assets/stylesheets.

gemfile

source 'https://rubygems.org'
ruby '1.9.3'

gem 'rails', '4.1.1'
gem 'devise', '3.0'
gem 'google-analytics-rails'
gem 'meta-tags'
gem 'databasedotcom'
gem 'databasedotcom-rails'
gem 'protected_attributes'
gem 'thin'

group :development do
  gem 'pg'
end

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

gem 'sass-rails',   '~> 4.0.2'
gem 'sprockets', '2.11.0'
gem 'sprockets-rails'
gem 'coffee-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'jquery-rails', "~> 2.3.0"
gem 'font-awesome-rails'

application.rb

# Enable the asset pipeline
config.assets.enabled = true

config.assets.initialize_on_precompile = false

# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'

# Custom error messages
config.exceptions_app = self.routes

# Static assets 
config.assets.precompile = true 
config.serve_static_assets = true

production.rb

# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true

# Compress JavaScripts and CSS
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true

# Generate digests for assets URLs
config.assets.digest = true

Answer 1

I had a similar problem with images and Heroku, and this worked for me:

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.

From here: Rails 4 images not loading on heroku (See the second answer)

Answer 2

Precompilation

All of my images are in assets/images

You must remember that Heroku relies on precompiled assets - so it will look in the public/assets/images, or public/images folder

When you're using bash to see whether the files exist, it would be far more robust to look in the /public/images folder, as this is where the precompiled assets would normally sit anyway

---

Fix

There are other subtleties such as different fonts and colours of progress bars that aren't being deployed properly

This could be a number of issues which are causing this:

1. Your assets may not be present
2. Your references to the assets may be incorrect

What I would do (and have done before) is firstly to precompile your assets locally, as david recommended. You can do that relatively simply:

$ rake asssets:precompile RAILS_ENV=production

This will populate your app's public folder with the relevant assets, which will be referenced by your various path helpers

-

Secondly, I would make sure those assets are being referenced properly. The way to do this is to use the various path helpers which are embedded inside Rails - a prime example being asset_path / asset_url:

#app/assets/stylesheets/application.css.scss
.test {
   background: asset_url("test.png");
}

This references the files regardless of whether they are precompiled or not; meaning that it will give you the ability to reference them in production. I would make sure your asset files have all the correct references in order to get things working again