Rails：在 CSS 中引用图像答案

【问题标题】：Rails: Referring to image in CSSRails：在 CSS 中引用图像
【发布时间】：2014-08-27 02:52:40
【问题描述】：

我在 Heroku 上有一个用 Rails 编写的应用程序，它在登录页面上有一个大图像作为背景。由于 Heroku 的文件系统是只读的，我决定将这些图像（它们是随机选择的）存储在 AWS S3 上。

我在 .css(.scss) 中的代码如下所示（简化）：

html {
  background: image-url('#{image}.jpg') no-repeat center center fixed;
}

我现在的问题是我的应用程序能够在开发中正确显示图像，但它无法在生产中显示图像（在 Heroku 上）。在查看交付的 .css 文件（在浏览器中）时，我想我看到了错误：

html {
  background: url("8017416067_4f6f75f956_o.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

似乎没有附加哈希，尽管我使用image-url，如上所示和建议的 i。 e. here。该文件在 S3 上的文件名是 8017416067_4f6f75f956_o-058c92aeab457efe0625a777f203430d.jpg。

关于我在这里做错了什么有什么建议吗？

编辑：我注意到在我从本地计算机获取的 .css 文件中，图像被 /assets/8017416067_4f6f75f956_o.jpg（不带引号）引用，而在线应用程序给我 "8017416067_4f6f75f956_o.jpg"。

已解决：我不知道为什么，但突然它起作用了。我做的最后一件事是我删除了整个 public/assets 文件夹，以便让 Heroku 预编译资产本身。

【问题讨论】：

【解决方案1】：

我曾经在生产环境中遇到过同样的问题 - URL 没有附加哈希。原因是我的 *.css 文件不是为生产环境编译的，所以网站使用的是原始的 *.css 文件，其中包含“未散列”的 URL。

首先，检查您是否在浏览器编译的 css 中看到，即它的名称附加了哈希。如果使用了未编译的 *.css 文件，您可以检查它是否包含在 config/environments/production.rb 的“可编译”文件列表中：

config.assets.precompile += %w( mystyles.css )

我看到的另一个原因可能是编译是在错误的环境下运行的（不适用于生产环境）。在您的服务器上使用以下命令：

RAILS_ENV=production bundle exec rake assets:precompile

但我认为 Heroku 已经默认运行此命令，以防万一。

【讨论】：