Question

I am using Ruby on Rails 3.0.10 and I am upgrading my RoR to the version 3.1.0. I am following the Upgrading to Rails 3.1 railscast and on the time 07:04 he starts to talk about problems on loading image files…

In few words:

[…] This (that is, image loading – more information here) won’t work as our application’s images are no longer in the /public/images directory. The simplest solution might appear to be to change the image’s URL from /images/railscasts_logo.png to /assets/railscasts_logo.png and while this will appear to work in development mode we’ll run into issues in production. […] We should instead always use the helper methods. This will link the image correctly in both development and production mode. […]

My problem is in my CSS files where I have statements like the following

.a_class {
    ...
    background-image: url("/images/avatar.png");
    ...
}

that, as well as it should be, do not load correctly image files.

How can I solve that problem in Rails 3.1?

Answer 1

You might have a look into railsguides, especially the part on the asset pipeline (http://guides.rubyonrails.org/asset_pipeline.html).

In section 2.2.2 CSS and SASS you’ll find the following explanation:

When using the asset pipeline, paths to assets must be re-written and sass-rails provides _url and _path helpers for the following asset classes: image, font, video, audio, javascript, stylesheet.

image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png".

The more generic form can also be used but the asset path and class must both be specified:

asset-url("rails.png", image) becomes url(/assets/rails.png)
asset-path("rails.png", image) becomes "/assets/rails.png"

There is also an alternavtive way by adding an .erb-extension instead of the default .sass, which is described in section 2.2.1. But I prefer the sass-way anyway.

Edit:

You might also want to check this post here on stackoverflow.