Heroku Rails 4 static background images not deployed

Question

I've been looking through all of the Rails 4 not serving static images posts, but can't seem to alleviate the problem I'm having.

Take a look at https://fierce-meadow-1536.herokuapp.com

The logo seems to be served, because that was one of the first images I put. A few weeks later, I started the design phase and added more images, but none of them show up.

Case in point the gray header where it says "All Jobs" should actually have a background image under it

What do you think is happening?

Here's what my Deployment to heroku is saying -->

Fetching repository, done.
Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 609 bytes, done.
Total 7 (delta 6), reused 0 (delta 0)

-----> Removing .DS_Store files
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.0.0
-----> Installing dependencies using Bundler version 1.5.1
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       Using rake (10.1.0)
       Using i18n (0.6.9)
       Using minitest (4.7.5)
       Using multi_json (1.8.2)
       Using atomic (1.1.14)
       Using tzinfo (0.3.38)
       Using builder (3.1.4)
       Using rack (1.5.2)
       Using erubis (2.7.0)
       Using mime-types (1.25.1)
       Using activerecord-deprecated_finders (1.0.3)
       Using polyglot (0.3.3)
       Using arel (4.0.1)
       Using bcrypt-ruby (3.0.1)
       Using will_paginate (3.0.4)
       Using sass (3.2.12)
       Using json (1.8.1)
       Using execjs (2.0.2)
       Using thor (0.18.1)
       Using coffee-script-source (1.6.3)
       Using fssm (0.2.10)
       Using chunky_png (1.2.9)
       Using hike (1.2.3)
       Using tilt (1.4.1)
       Using mini_portile (0.5.2)
       Using pg (0.15.1)
       Using nested_form (0.3.2)
       Using pr_geohash (1.0.0)
       Using bundler (1.5.1)
       Using rails_serve_static_assets (0.0.1)
       Using rubyzip (0.9.9)
       Using rails_stdout_logging (0.0.3)
       Using ruby-ole (1.2.11.7)
       Using temple (0.6.7)
       Using rsolr (1.0.9)
       Using thread_safe (0.1.3)
       Using rack-test (0.6.2)
       Using treetop (1.4.15)
       Using bootstrap-will_paginate (0.0.9)
       Using rdoc (3.12.2)
       Using bootstrap-sass (2.3.2.0)
       Using uglifier (2.3.2)
       Using compass (0.12.2)
       Using coffee-script (2.2.0)
       Using nokogiri (1.6.0)
       Using rails_12factor (0.0.2)
       Using slim (2.0.2)
       Using spreadsheet (0.9.6)
       Using sunspot (2.1.0)
       Using mail (2.5.4)
       Using compass-rails (1.1.2)
       Using sdoc (0.3.20)
       Using roo (1.13.0)
       Using sprockets (2.10.1)
       Using activesupport (4.0.0.rc2)
       Using faker (1.1.2)
       Using actionpack (4.0.0.rc2)
       Using actionmailer (4.0.0.rc2)
       Using sprockets-rails (2.0.1)
       Using railties (4.0.0.rc2)
       Using formtastic (2.2.1)
       Using coffee-rails (4.0.0)
       Using sass-rails (4.0.0)
       Using jquery-rails (3.0.4)
       Using chosen-rails (1.0.2)
       Using activemodel (4.0.0.rc2)
       Using jbuilder (1.5.3)
       Using carrierwave (0.9.0)
       Using activerecord (4.0.0.rc2)
       Using rails (4.0.0.rc2)
       Using sunspot_rails (2.1.0)
       Your bundle is complete!
       Gems in the groups development and test were not installed.
       It was installed into ./vendor/bundle
       Bundle completed (1.34s)
       Cleaning up the bundler cache.
-----> Writing config/database.yml to read from DATABASE_URL
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       cp public/assets/[email protected] public/assets/[email protected]
       cp public/assets/chosen-sprite-fa9df9bbee9f1ab89799379cb153636e.png public/assets/chosen-sprite.png
       Asset precompilation completed (13.88s)
       Cleaning assets
-----> WARNINGS:
       You have not declared a Ruby version in your Gemfile.
       To set your Ruby version add this line to your Gemfile:
       ruby '2.0.0'
       # See https://devcenter.heroku.com/articles/ruby-versions for more information.
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for Ruby  -> console, rake, web, worker

-----> Compressing... done, 38.9MB
-----> Launching... done, v29
       http://fierce-meadow-1536.herokuapp.com deployed to Heroku

Here's is my gemfile -->

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.rc2'
gem 'bootstrap-sass', '2.3.2.0'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'

gem 'carrierwave' # for resume upload http://railscasts.com/episodes/253-carrierwave-file-uploads
gem "nested_form" # added to assets pipeline

gem 'roo' # for importing old users http://railscasts.com/episodes/396-importing-csv-and-excel

gem 'sunspot_rails' # one field search -- http://railscasts.com/episodes/278-search-with-sunspot

# for advanced search, try http://railscasts.com/episodes/111-advanced-search-form-revised  // very cool way to filter

gem 'annotate', '2.5.0', group: :development



group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0.rc2'

gem 'slim'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

gem 'chosen-rails' #http://harvesthq.github.io/chosen/ https://github.com/tsechingho/chosen-rails

gem 'formtastic'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks' Removed turbolinks, because problems loading camera and common app js http://stackoverflow.com/questions/20662426/rails-not-loading-js-in-chome-from-link-to

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'


group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor', '0.0.2'
  gem 'rails_serve_static_assets'
end

# Use ActiveModel has_secure_password
 gem 'bcrypt-ruby', '~> 3.0.0'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

This is my Production Config file -->

Atlas::Application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both thread web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
  # config.action_dispatch.rack_cache = true

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

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

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

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

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  config.force_ssl = true

  # Set to :debug to see everything in the log.
  config.log_level = :info

  # Prepend all log lines with the following tags.
  # config.log_tags = [ :subdomain, :uuid ]

  # Use a different logger for distributed setups.
  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = "http://assets.example.com"

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
  # config.assets.precompile += %w( search.js )

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  config.action_mailer.default_url_options = { :host => "fierce-meadow-1536.herokuapp.com" }

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation can not be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Disable automatic flushing of the log to improve performance.
  # config.autoflush_log = false

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new
end

Answer 1

Run heroku run bash then go to cd public/assets and run an ls. You will see that all the image files now have a hash appended to their name (this is done for cache busting).

You will need to use a scss helper in your scss file, instead of using url(assets/image-file.png) use image-url('image-file.png'), it will resolve the image name properly when it is deployed to production.

For more info checkout: How to reference images in CSS within Rails 4

Answer 2

I had *.jpeg files in my app/assets/images directory, and I noticed that Heroku compiled them to have a .jpg extension. Since I was trying to render:

<%= image_tag('my_image.jpeg') %>

the precompiled image couldn't be found. I changed the file extension of the image file to be .jpg and my image tag to:

<%= image_tag('my_image.jpg') %>

and Heroku was able to display the images properly.