在Heroku Cedar上部署Rails 3.1.3後的圖像desapears

在heroku雪松上部署後，圖像desapear。在Heroku Cedar上部署Rails 3.1.3後的圖像desapears

我已經像一個CSS：

: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到app/assets/images/datatables/本地工作，但不是在Heroku。

我也可以使用= asset_tag('datatables/icon.png') ...，但如何在CSS內部做到這一點？

我也試過config.action_dispatch.x_sendfile_header = nil在config/environments/production.rb沒有成功。

來源

2012-02-24 Luca G. Soave

在生產環境中，資產將在其URL中附加MD5指紋。使用資產路徑助手以便使用正確的文件名是很重要的。

看來您正在使用Haml，基於:css過濾器。

在Haml的，可以估算出紅寶石進入doucment與#{ ruby }

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

如果您正在使用的Sass/SCSS，您可以使用內置的資產幫手。

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

如果您使用的是純CSS，它會更復雜一點。您需要將.erb附加到css文件。（資產/樣式表/ file.css.erb'）

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

您應該使用無禮或SCSS。它最乾淨最瘦。

來源

2012-02-25 00:06:15 fullsailor

很好的解釋fullsailor。謝謝 – 2012-02-25 08:09:54

嘿，謝謝你的回答。有沒有類似的助手在.js.coffee文件中引用它？我正在使用jQuery來插入包含我直接使用url引用的圖像的html，以及所附散列（由Heroku）的b/c，圖像不顯示。再次感謝。 – jackerman09 2013-10-14 14:51:38

我剛剛得到它自己的工作。

的關鍵是把這個線在你的application.rb中：

config.assets.initialize_on_precompile = false

您使用的是jquery-datatables-rails寶石？如果沒有，你應該！把這一行在你的Gemfile：

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

並運行：

捆綁安裝

注意：不要把你的資產組或部署到時將無法正常工作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。爲您的控制器咖啡文件，你正在使用的數據表中：

如果您使用的流體容器：

#// 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" 
});

來源

2012-04-28 07:10:40

在Heroku Cedar上部署Rails 3.1.3後的圖像desapears

回答

相關問題