在Heroku Cedar上部署Rails 3.1.3之后,图像消失了

在heroku雪松上部署后,图像消失。

我有一个像这样的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/environments/production.rb尝试了config.action_dispatch.x_sendfile_header = nil但没有成功。

在生产环境中,资产将在其URL上附加MD5指纹。 使用资产路径助手非常重要,以便使用正确的文件名。

您似乎正在使用Haml,基于:cssfilter。

在Haml中,您可以使用#{ ruby } Ruby插入到doucment中

 :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') %>); } 

你应该使用Sass或SCSS。 它是最干净,最瘦的。

我让自己工作了。

关键是将这一行放在您的application.rb中:

 config.assets.initialize_on_precompile = false 

您使用的是jquery-datatables-rails gem吗? 如果没有,你应该! 把这一行放在你的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.coffee文件中:

如果您使用的是流体容器:

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