在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,基于:css
filter。
在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" });