Heroku 不提供背景图片，localhost 可以吗？答案

【问题标题】：Heroku does not serve background image, localhost does?Heroku 不提供背景图片，localhost 可以吗？
【发布时间】：2013-10-12 14:44:24
【问题描述】：

我的 rails 应用程序有问题（Rails 4.0.0.rc2，ruby 2.0.0p195）。

行为很奇怪：我的 localhost 正确显示背景图片，Heroku 没有。

在 heroku 日志中，我可以看到以下错误：

ActionController::RoutingError (No route matches [GET] "/assets/piano.jpg"):

我通过在我的 custom.css.scss 中插入以下代码来创建背景图像：

.full { 
  background: image-url("piano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我使用静态页面上的以下代码触发此操作：

<body class="full">
....
</body>

我已经在生产环境中运行 gem：

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

在 production.rb 中，我将以下设置设置为 true：

config.serve_static_assets = true

但是，图像未显示。你能帮帮我吗？

【问题讨论】：

stackoverflow.com/questions/15257555/…你可以参考这个问题。
是的。但是，问题不是基于我选择的引用！它与资产的预编译有关。

标签： css ruby-on-rails heroku ruby-on-rails-4 asset-pipeline

【解决方案1】：

确保在您的 production.rb 文件中设置这些

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

【讨论】：

这是我的问题。在过去的一周里，我差点撞到头上，我想说声谢谢！
您能解释一下为什么这个解决方案有效吗？ @Brock90
请注意，config.serve_static_assets 已更改为 config.public_file_server。另外，感谢您的回答。我只需要config.assets.compile，即使我预编译了我的资产。

【解决方案2】：

我自己找到了问题的解决方案：

RAILS_ENV=production bundle exec rake assets:precompile

在我的控制台中运行此命令后，图片正确显示。

以前我只尝试过运行：

rake assets:precompile

仅此一项并没有帮助。您必须在命令中处理生产环境。

我希望这可以作为其他用户的参考。

【讨论】：

【解决方案3】：

With the background property and SASS:

background: image-url("my_image.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

【讨论】：

【解决方案4】：

我需要结合其他答案来为我工作。

我需要使用 @Brock90 的生产配置设置以及 Alex 提到的预编译资产。

【讨论】：

【解决方案5】：

不要将图片放在 images/ 目录的子目录中

如果有人仍然对此有问题。我到处寻找解决方案，我想我什么都试过了。对于我的情况，我有类似的实例

background-image: url("containers/filled/Firkin-Keg-5-Gallons_filled.png");

所以我在图像中有文件夹。这适用于 localhost，但不适用于 heroku。

background-image: url("Firkin-Keg-5-Gallons_filled.png");

没有更多的子目录。

编辑这是错误的。正确使用请参考下面的cmets

【讨论】：

这是大错特错。子文件夹完美运行。但是，您必须正确使用它：background-image: url(image_path("containers/filled/Firkin-Keg-5-Gallons_filled.png")) 并确保您的样式表文件以 .scss 结尾
使用内置的资产管道 SCSS 助手链接到您的管道编译资产。有一堆但每个都链接到相应的/app/assets路径：image-url，font-url