在 Heroku Cedar 上部署 Rails 3.1.3 后图像消失答案

【问题标题】：Images desapears after deploy Rails 3.1.3 on Heroku Cedar在 Heroku Cedar 上部署 Rails 3.1.3 后图像消失
【发布时间】：2012-02-24 23:33:34
【问题描述】：

在 heroku cedar 上部署后，图像消失。

我有一个类似的 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/Locally 有效，但不适用于 Heroku。

我也可以使用= asset_tag('datatables/icon.png') ...，但是如何在 CSS 中实现呢？

我也在config/environments/production.rb 中尝试过config.action_dispatch.x_sendfile_header = nil，但没有成功。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3.1 heroku asset-pipeline

【解决方案1】：

在生产环境中，资产的 URL 会附加一个 MD5 指纹。请务必使用资产路径帮助程序，以便使用正确的文件名。

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

在 Haml 中，您可以使用 #{ ruby } 将 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 文件中。 ('assets/stylesheets/file.css.erb')

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

你应该使用 Sass 或 SCSS。它是最干净和最精简的。

【讨论】：

伟大的解释fullsailor。谢谢
嘿，谢谢你的回答。在 .js.coffee 文件中是否有类似的帮助程序来引用它？我正在使用 jQuery 插入包含我直接使用 url 引用的图像的 html，以及附加哈希的 b/c（由 Heroku 提供），图像未显示。再次感谢。

【解决方案2】：

我自己也弄好了。

关键是把这一行放在你的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"
});

【讨论】：