Heroku CedarでRails 3.1.3をデプロイした後に画像がなくなります

Question

英雄杉に展開した後、画像は消えます。 app/assets/images/datatables/に

: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; } 

と相対PNGローカルで動作しますが、ないHerokuの上：

私のようなCSSをしました。

私は= asset_tag('datatables/icon.png') ...も使用できますが、CSSの中でどのようにするのですか？

config.action_dispatch.x_sendfile_header = nilもconfig/environments/production.rbで試してみました。

Answer 1

運用環境では、アセットにはURLにMD5サムプリントが付加されます。アセットパスヘルパーを使用して、正しいファイル名が使用されるようにすることが重要です。

:cssフィルタに基づいて、Hamlを使用しているようです。 HAMLで

あなたはサス/ SCSSを使用している場合は、アセットヘルパーに建てを使用することができます#{ ruby }

:css 
    table.table thead .sorting { background-image: url(#{ asset_path('datatables/sort_both.png')}) } 
    ... and so on. 

でdoucmentにルビーを補間することができます。

table.table thead .sorting { 
    background-image: asset-url('datatables/sort_both.png'); 
} 

普通のCSSを使用している場合は少し複雑です。 .erbをcssファイルに追加する必要があります。 （ 'assets/stylesheets/file.css.erb'）

table.table thead .sorting { 
    background-image: url(<%= asset_path('datatables/sort_both.png') %>); 
} 

SassまたはSCSSを使用してください。その最もクリーンで痩せた。

Answer 2

私はちょうどそれ自身を働かせました。

鍵は、あなたのapplication.rbにこの行を入れている：

config.assets.initialize_on_precompile = false 

あなたがjquery-datatables-rails宝石を使用していますか？そうでなければ、あなたはすべきです！

gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails' 

と実行します：あなたのgemfileにこの行を入れて、あなたの資産グループに入れないでくださいまたはに展開するとき、それは動作しません。

バンドルは

NOTEをインストールheroku（資産グループは本番環境では使用されていないため）。

また、（繰り返して申し訳ありませんが、その重要）あなたのapplication.rbにこの行を入れてください：

config.assets.initialize_on_precompile = false 

は

あなたのapplication.jsに

//= require dataTables/jquery.dataTables 
//= require dataTables/jquery.dataTables.bootstrap 

をこれらを追加し、これを追加あなたのapplication.cssに：

*= require dataTables/jquery.dataTables.bootstrap 

これをあなたのjsに追加してください。お使いのコントローラ用のコーヒーファイルあなたがDataTableのを使用している：あなたは流体コンテナを使用している場合

：

#// For fluid containers 
$('#dashboard').dataTable({ 
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
}); 

を使用すると、固定幅のコンテナを使用している場合：

#// For fixed width containers 
$('.datatable').dataTable({ 
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
});