Question

在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.action_dispatch.x_sendfile_header = nil中尝试config/environments/production.rb但没有成功。

Answer 1

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

您似乎正在使用Haml，基于:css过滤器。

在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。它是最干净，最精简的。

Answer 2

我自己就开始工作了。

关键是将此行放在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.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"
});

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

2 个答案: