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.