Rails 3.1 serving images from vendor/assets/images

asset-pipelineruby-on-rails-3ruby-on-rails-3.1

I am trying to put some external images (used by a jQuery plugin) to vendor/assets/images in my Rails 3.1 app. Problem is that when I try something like:

<%= image_tag "ui-bg_flat_75_ffffff_40x100.png" %>

I get an error:

No route matches [GET] "/assets/ui-bg_flat_75_ffffff_40x100.png"

I checked my Rails.application.config.assets.paths and it list these dirs:

..../app/assets/images
..../app/assets/javascripts
..../app/assets/stylesheets
..../vendor/assets/images
..../vendor/assets/stylesheets
..../.rvm/gems/ruby-1.9.2-p180@mygems/gems/jquery-rails-1.0.9/vendor/assets/javascripts

As you can see /vendor/assets/images is listed there. If I put my image to app/assets/images everything works.

I thought that new asset pipeline was supposed to go through all assets dirs and serve requested file wherever it finds it.

Does anyone knows what's the problem here?

Best Answer

I had to restart my rails server after creating the vendor/assets/images directory. Before this, I was seeing the same error as you ("No route matches [GET]").

My guess is that the rails server does not check these directories if they did not exist when it was first started. When you open a rails console to diagnose the issue, you get a new instance of rails which knows about the directory, which only adds to the confusion.

Related Solutions

Jquery-ui – Ruby on Rails 3.1 and jQuery UI images

Now that we have Ruby on Rails 3.1.0, this is what worked for me:

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

This directly includes the jQuery UI provided by the jquery-rails gem. But the gem does not provide the theme files. For these, I added a theme directory under vendor/assets/stylesheets, containing:

the jquery.ui.theme.css file,
the jQuery UI theme's images directory.

Be sure to keep the theme's images directory with the CSS file! Do not put the image files under vendor/assets/images, or they won't be found by jQuery (which search them under /assets/images).

Finally, changed the app/assets/stylesheets/application.css file to:

/*
*= require_tree ../../../vendor/assets/stylesheets
*= require_tree .
*/

Rails 3.1 newbie : where should I put javascript code

Put your own javascript & coffeescript under app/assets/javascripts.

Take a look inside app/assets/javascripts/application.js. When you ran rails new APP it should have added //= require_tree . to this file. See section 2.3 for more.

This is a special instruction that Sprockets understands that wil automatically include all files in the same directory as your application.js file and in subfolders below it.

If you want jquery and jquery-ui to be loaded your application.js file should look like

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

If you have gem 'jquery-rails' in your bundle, this gem has already added the jquery files to the asset pipeline for you, so you don't have to worry about downloading them manually.

In your head section of your application view you will want to include javascript_include_tag "application" in the head section. Chances are, if you used the generator, it's already there.

Please read up on the Rails Asset Pipeline for more information.

The . in the line with require_tree is referencing the location of the current file. The //= operator is referencing the asset pipeline.

Placing a file in app/assets, lib/assets or vendor/assets will add it to the asset pipeline. See section 2.1.

Best Answer

Related Solutions

Jquery-ui – Ruby on Rails 3.1 and jQuery UI images

Rails 3.1 newbie : where should I put javascript code

Related Topic