Images desapears after deploy Rails 3.1.3 on Heroku Cedar - ruby-on-rails

Question

After deploy on heroku cedar, images desapear.
I've a CSS like :
:css
/* */
table.table thead .sorting { background: url('assets/datatables/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('assets/datatables/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('assets/datatables/sort_desc.png') no-repeat center right; }
/* */
table.table thead .sorting_asc_disabled { background: url('assets/datatables/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('assets/datatables/sort_desc_disabled.png') no-repeat center right; }
and relative png into app/assets/images/datatables/Locally works, but not on Heroku.
I could also use = asset_tag('datatables/icon.png') ..., but how to do it inside CSS ?
I've also tried config.action_dispatch.x_sendfile_header = nil in config/environments/production.rb without success.

Answer 1

In the production environment the assets will have an MD5 thumbprint appended to their URL. It is important that you use the asset path helpers so that the right filename is used.
It appears that you are using Haml, based on the :css filter.
In Haml you can interpolate Ruby into the doucment with #{ ruby }
:css
table.table thead .sorting { background-image: url(#{ asset_path('datatables/sort_both.png')}) }
... and so on.
If you are using Sass/SCSS, you can use the built in asset helpers.
table.table thead .sorting {
background-image: asset-url('datatables/sort_both.png');
}
Its a little more complicated if you are using plain CSS. You'll need to append .erb to the css file. ('assets/stylesheets/file.css.erb')
table.table thead .sorting {
background-image: url(<%= asset_path('datatables/sort_both.png') %>);
}
You should use Sass or SCSS. Its the cleanest and leanest.

Answer 2

I just got it working myself.
The key is putting this line in your application.rb:
config.assets.initialize_on_precompile = false
Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
and run:
bundle install
NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).
Also, make sure to put this line in your application.rb (sorry to repeat, but its important):
config.assets.initialize_on_precompile = false
Add these to your application.js
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
Add this to your application.css:
*= require dataTables/jquery.dataTables.bootstrap
And add this to your js.coffee file for your controller you are using datatables in:
If you are using fluid containers:
#// For fluid containers
$('#dashboard').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
If you are using fixed width containers:
#// For fixed width containers
$('.datatable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});