Rails 4 + Sass - 生产中没有背景图片

Question

我知道在 SO 上有很多类似的 questions/answers，我已经尝试了至少 7 个建议的方法。我可以通过多种方式在本地显示我的应用程序的背景图片。尝试了将近40个小时，似乎没有办法在生产中渲染出来。它在以下设备上运行：

Ruby2.1.5
Rails 4.1.8
通过 Amazon Elastic Beanstalk 的 Puma 2.1（单实例 - 无负载均衡器）

我已经尝试了 config.serve_static_assets=[true|false] 和设置 RAILS_SKIP_ASSET_COMPILATION 的所有组合真假。

运行 耙子assets:precompile RAILS_ENV=生产

所有能想到的路径都试过了，就是找不到背景图片。我注意到的一件事是预编译在将图像复制到 public/assets 目录时会更改图像的名称。（ 示例："foo.jpg" 变为 "foo-ilfajwe8hjsa8erfjsdf.jpg"）所以我尝试将原始图像文件复制到新的 public/assets 目录，希望应用程序能在那里找到它们.那没有用。

我想这可能是我在 css 中引用它的方式，因为奇怪的是 favicon 文件的显示方式与我应用程序 "fonts" 文件夹中的字体一样。并且都像背景图片一样附加了他们的名字。

这是我的 application.html.erb..

<!DOCTYPE html>
<html>
<head>
  <title>Capstone v1.4.5</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag 'capstone_icon.png' %>
</head>
<body>
    <% if notice %>
      <p class="alert alert-success"><%= notice %></p>
    <% end %>
    <% if alert %>
      <p class="alert alert-danger"><%= alert %></p>
    <% end %>
    <%= render 'navigation' %>
    <main>
        <%= yield %>
    </main>
</body>
</html>

这是application.css.sass..

/*
 *= require bootstrap.min
 */

@import "bootstrap-sprockets"
@import "bootstrap"

@font-face 
    font-family: 'Cinzel-Regular'
    src: font-url('Cinzel-Regular.ttf')

@font-face 
    font-family: 'Oxygen'
    src: font-url('Oxygen.otf')

html
    position: relative
    min-height: 100%

body 
    background-image: image-url("snowy_prairie_bg.jpg")
    background-repeat: no-repeat
    background-position: center top
    font-family: 'Oxygen'
    margin: 0 0 95px

我的public目录的内容（预编译后）

application-6cca23f2f72df0ad7d26279535719396.css
application-6cca23f2f72df0ad7d26279535719396.css.gz
application-fddd9c84ba451526dbd2ef5bf46e494c.js
application-fddd9c84ba451526dbd2ef5bf46e494c.js.gz
bootstrap
capstone_icon-ed6ffe0ae4bbbb56a8b74a4d7ff230cf.png
capstone_icon.png
Cinzel-Regular-59dcda430d3afc3ace221f1835d7fb08.ttf
images
manifest-73d04c0fd1290b15fb280becfcf62b7b.json
Oxygen-1c736bd9242de63cf87c07f0a48c9b5c.otf
Oxygen-Bold-01bc72645c864aa090d57754565ef634.otf
Oxygen-BoldItalic-cfe32a5aedef7b25f8b1efdfcbdbd72a.otf
Oxygen-Italic-2a51c29c8f2bd242ac27e6fb7860f6a1.otf
snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
snowy_prairie_bg.jpg

我在 css 中引用的图片有误吗？同样，它在当地表现出色。我应该使用 Passenger 而不是 Puma 吗？这不是一个非常小的应用程序，我在数据库上投入了大量资金，该数据库也托管在亚马逊上。但正如我所说，我将近 40 个小时才试图渲染这个背景。

有什么想法请帮忙。我愿意尝试任何事情！

谢谢

仅供参考 - 上述引导程序、字体、其他图像和 sass 样式完美呈现。这只是背景图像。谢谢

EDIT：当我转到页面时，capstonesavings.com，开发人员中显示以下错误。控制台：无法加载资源：服务器响应状态为 403（禁止访问）。我需要更改某些内容的权限吗？

Answer 1

好的，我想我已经修好了！

上面的大部分代码都是正确的，但是我把上面的改成了下面的application.css.sass..

已更改

background-image: image-url("snowy_prairie_bg.jpg")

到

background-image: asset-url("snowy_prairie_bg.jpg")

然后，我通过 SSH 进入实例 (eb ssh) 并执行了以下操作：

cd /var/app/current

之后是

sudo chmod 755 public/assets/snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg

我之前尝试过对 SaSS 进行上述更改，但在不更改权限的情况下无法正常工作。感谢 Chrome 开发人员工具，我在呈现页面时注意到一个（微小的）错误标志。我点击它，它显示了我在上面的编辑中添加的 403 错误。这是亚马逊用来确保安全的一些东西，因为我猜你可以将你的日志文件等路由到相关的 S3 存储桶。所以这就是为什么我在更改烫发时明确针对有问题的图像。这个网站不会有大量图片，但如果有的话，我可能会花时间详细说明存储桶中的存储并相应地设置更广泛的权限。

这为我节省了一天的时间。希望对其他人有帮助。

Rails 4 + Sass - 生产中没有背景图片

Rails 4 + Sass - No background image in production

ruby-on-rails

sass

amazon-ec2

puma

amazon-elastic-beanstalk