Rails 4 - Heroku deploy works but images in CSS file do not appear

Question

I have tried multiple ways to get some images to show up that are embedded in my style.css.erb file upon a Heroku deploy. I have no problems with the images showing up locally just upon deploy so I am assuming this is due to the precompiled assets. Here is what I have, any help/advice is much appreciated:

style.css.erb

#parallax1{ 
  background-image:url('<%= asset_path("parallax/1.jpg")%>');
}

#parallax2{ 
  background-image:url('<%= asset_path("parallax/2.jpg")%>');
}

#intro{
position: relative; 
margin: 0 auto;
width: 100%;
overflow-x: hidden;
height:650px;
z-index:2;
background-image: url('<%= asset_path("bgslides/3.jpg")%>');
background-size:cover;
}

production.rb

config.assets.precompile += %w( jquery.js bootstrap.min.js jquery.nav.js jquery.scrollTo.js grid.js custom.js stellar.js modernizr.custom.js jquery.simple-text-rotator.min.js wow.min.js mb.bgndGallery.effects.js mb.bgndGallery.js font-awesome.css.scss.erb animate.css bootstrap.min.css simpletextrotator.css style.css.erb *.jpg *.png )

assets.rb

config.assets.precompile += %w( jquery.js bootstrap.min.js jquery.nav.js jquery.scrollTo.js grid.js custom.js stellar.js modernizr.custom.js jquery.simple-text-rotator.min.js wow.min.js mb.bgndGallery.effects.js mb.bgndGallery.js font-awesome.css.scss.erb animate.css bootstrap.min.css simpletextrotator.css style.css.erb *.jpg *.png )

application.rb

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module DryerPlug
 class Application < Rails::Application
   config.assets.paths << Rails.root.join("app", "assets", "fonts")
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.

# Set Time.zone default to the specified zone and make Active Record auto-convert to this        zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'

# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
 end
end

Gemfile

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'

# 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'
# Turbolinks makes following links in your web application faster. Read more:                
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

gem 'spring',        group: :development
gem 'mail_form'
gem 'simple_form'
gem 'pg', group: :production
gem 'rails_12factor', group: :production

Inspect the CSS on your deployed application. What path is it trying to use to find the images? — opticon
– opticon, Commented Jul 7, 2014 at 0:34
it is trying to find them in heroku_app_name.herokuapp.com/assets/bgslides/1.jpg. It is missing the images folder entirely. Not sure if that tells you anything... — user2386744
– user2386744, Commented Jul 7, 2014 at 1:09
Have you tried doing a manual heroku run rake assets:precompile? Always worth a try. — Inkling
– Inkling, Commented Jul 7, 2014 at 1:45
Yep that seems to succeed. It is finding the asset path but not the fingerprinted version it seems. — user2386744
– user2386744, Commented Jul 7, 2014 at 1:46
Have a look here: https://devcenter.heroku.com/articles/rails-4-asset-pipeline#dependencies-improperly-used. Before that though, you may want to try doing a bundle update because there was something related changed in sprockets semi-recently. — Inkling
– Inkling, Commented Jul 7, 2014 at 2:19

Richard Peck · Accepted Answer · 2014-07-07 06:28:14Z

SCSS

The problem you have is you're calling a ruby-on-rails erb methods in your CSS - which, although feasible, will likely cause a multitude of problems down the line

A much better way to resolve this is to use one of the Rails CSS preprocessors so your application can precompile the assets properly. The typical CSS preprocessor is SCSS:

#app/assets/stylesheets/application.css.scss
#parallax1{ 
  background-image: asset_url("parallax/1.jpg");
}

--

Precompile

You need to keep your stylesheets 100% CSS (or SCSS) - as when you precompile them (required for deploying to Heroku), Rails won't be able to use much of the logic / functionality an erb file would create

Although you are correct when you've used the erb functionality, the best way is to use the SCSS preprocessor. On top of this, you need to ensure you've precompiled your assets locally:

$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Precompiled"
$ git push heroku master

Justin Ho Tuan Duong · Accepted Answer · 2014-07-07 04:45:45Z

-1

Did you try compiling the assets locally? That is what usually what works for me.

First clean the current assets

rake assets:clean

Then precompile them again

rake assets:precompile

Then commit these assets and push to Heroku. If this doesn't work, try to run in in production mode by adding RAILS_ENV=production to each command.

answered Jul 7, 2014 at 4:45

Justin Ho Tuan Duong

6063 silver badges7 bronze badges

Collectives™ on Stack Overflow

Rails 4 - Heroku deploy works but images in CSS file do not appear

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related