Rails: How to reference images in CSS within Rails 4

ruby-on-rails heroku ruby-on-rails-4
Nick ONeill picture Nick ONeill · Mar 6, 2013 · Viewed 160.9k times · Source

There's a strange issue with Rails 4 on Heroku. When images are compiled they have hashes added to them, yet the reference to those files from within CSS don't have the proper name adjusted. Here's what I mean. I have a file called logo.png. Yet when it shows up on heroku it is viewed as:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

However the CSS still states:

background-image:url("./logo.png");

The result: the image doesn't display. Anybody run into this? How can this be resolved?

Answer

zeeraw picture zeeraw · Mar 23, 2013

Sprockets together with Sass has some nifty helpers you can use to get the job done. Sprockets will only process these helpers if your stylesheet file extensions are either .css.scss or .css.sass.

Image specific helper:

background-image: image-url("logo.png")

Agnostic helper:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Or if you want to embed the image data in the css file:

background-image: asset-data-url("logo.png")

Related questions

How to solve error "Missing `secret_key_base` for 'production' environment" (Rails 4.1)

I created a Rails application, using Rails 4.1, from scratch and I am facing a strange problem that I am not able to solve. Every time I try to deploy my application on Heroku I get an error 500: Missing `secret_key_…

Read More
"bin/rails: No such file or directory" w/ Ruby 2 & Rails 4 on Heroku

While following the Rails 4 Beta version of Michael Hartl's Ruby on Rails Tutorial, my app fails to start on Heroku, but runs fine locally with bundle exec rails server. Checking heroku logs -t reveals the following error: $ heroku[web.1]: State …

Read More
Can't get CSS working on Heroku using Rails 4 with bootstrap-sass gem

I have deployed an app to Heroku with one issue I can't seem to get figured out. The CSS for the app via Bootstrap-sass does not load up thus I have an un-styled app. At the moment this is just …

Read More