Background image not showing in Rails 3.1 production

Question

I have an issue with background images not showing up in production mode in a Rails 3.1 app (3.1.0.rc8). I'm also using sprockets 2.0.0 and passenger 3.0.8.

My stylesheet is .scss and uses image_tag('...') in the background section. When I deploy I am precompiling the assets.

My production server is using Apache2 with Passenger, with the application deployed to a sub URI. The virtual host is defined as:

ServerName wibble
DocumentRoot /srv/www
...
RailsBaseURI /myapp
<Directory /srv/www/myapp>
    Options -MultiViews
</Directory>

The application is actually deployed to /srv/applications/myapp and I've created a symbolic link from /srv/www/myapp to /srv/applications/myapp/current/public.

The stylesheet is being served correctly, but when I inspect the element for the logo it's coming up as:

url("http://wibble/assets/logo-xxx.png")

intead of:

url("http://wibble/myapp/assets/logo-xxx.png")

Actually, if I change the URL as above using edit declaration in Opera, it does show the logo correctly. This suggests to me that I'm referencing the image correctly, and it's being correctly precompiled. The actual stylesheet is fine so I'm also picking up the assets correctly. Just seems as if the RailsBaseURI is being missed out the url path.

I've tried all sorts in the stylesheet - using .erb, asset_path, /myapp/logo.png, myapp/logo.png - and nothing works. It all works fine in development mode with the thin server.

Any help will be greatly appreciated.

Answer 1

If I deploy to a sub-URI, I've only found one way that will work for referring to an image from a CSS file in the asset pipeline. So if I have the following CSS in the asset pipeline:

div{background: transparent url('../images/logo.png') no-repeat top left;}

Then place the image at public/images/logo.png. Trying to use the SCSS image_url helper always seems to want to put the assets at the root ("/assets").

Putting the image in the old location within public works, but it takes the logo.png file out of the asset pipeline where it isn't given a digest to properly expire it.

Answer 2

Finally I've come up with a couple of solutions.

1) From https://github.com/rails/sass-rails/issues/17 it looks like this could get fixed in sass-rails. In the meantime I've monkey-patched helpers.rb along the lines of the proposed patch in the link above. I simply set the required environment variable in the asset precompile line in deploy.rb.

I do all my monkey patching in a single file config/initializers/gem_patches.rb. In this file I patched this method as:

module Sass
  module Rails
    module Helpers
      protected
      def public_path(asset, kind)
        path = options[:custom][:resolver].public_path(asset, kind.pluralize)
        path = ENV['PRODUCTION_URI'] + path if ENV['PRODUCTION_URI']
        path
      end
    end
  end
end

2) Alternatively if it's ok to embed images in the CSS, changing the stylesheet to have a .erb extension, and replacing the image-url('logo.png') with url(<%= asset_data_uri 'logo.png' %>) will work without any need to change sass-rails.

Answer 3

Have you tried asset_path instead of image_tag?

As well, beware of this in your production.rb file:
config.action_dispatch.x_sendfile_header = "X-Sendfile" # Use 'X-Accel-Redirect' for nginx

With your apache installation, you may have to comment that out.