生产中的 Rails 图像 url答案

【问题标题】：Rails image url in poduction生产中的 Rails 图像 url
【发布时间】：2014-10-12 06:11:08
【问题描述】：

当我使用 git push heroku master 将我的网站投入生产时，我的 CSS 中的 url 没有引用正确的图像 url。

这是我在开发环境中的情况：

app/assets/images/logo.png 存在
app/views/layouts/application.html.erb：<%= stylesheet_link_tag "style" %>
app/assets/stylesheets/style.css：background: asset-url("logo.png");

这是我在生产中的情况（当我“查看页面源代码”时）：

不知道怎么找到logo.png？
链接到我的 CSS：<link href="/assets/style-75a5c3912777c4b39ba92d1893ac7815.css" media="screen" rel="stylesheet" />
在我的（压缩的）CSS 中，我可以找到：background:asset-url("logo.png");

对于直接从 app/views/* 调用的其他图像，没关系 (<%= link_to image_tag("xxx.png") %>)

在 config/environments/production.rb 我有：

config.assets.precompile += ['style.css']
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.digest = true
config.assets.compile = true
config.serve_static_assets = true

我正在关注this great tutorial。

【问题讨论】：

那么它在生产中指的是什么 URL？因为如果你编译的 CSS 仍然显示asset-url('logo.png')，那么你做错了什么。
CSS 仍然显示asset-url('logo.png') .... :/
@ZazOufUmI 你是如何为你的图片制作网址的？你确定 logo.png 存在于 app/assets/images 而不是 app/assets/images/some_folder 因为。如果它在 images 文件夹中，那么 assets-url 或 image-url 将为您创建正确的路径
你是从 sass/scss 编译 CSS 文件吗？他们为您提供了asset-url 辅助方法。
我更新了我的请求。是的@sevenseacat 我曾经使用过这些命令来帮助我解决另一个问题：stackoverflow.com/questions/19695809/…

标签： css ruby-on-rails image asset-pipeline production

【解决方案1】：

SCSS

据我所知，问题在于您没有使用任何CSS preprocessors (SCSS / SASS)，从而取消了Rails 助手asset-url 的功能。

我会这样做：

#app/assets/stylesheets/style.css.scss
background: asset-url("logo.png");

资产管道

如果您了解asset pipeline 的工作原理，这将是有意义的

基本上，资产管道是放置所有css / image / javascript 文件的地方，您的应用程序可以静态或动态调用这些文件。在开发过程中，asset_pipeline 可以很好地为您提供所有文件的中心位置——所有文件都是动态调用的。

生产

当大多数人想要使用资产管道in production 时，就会出现“问题”。生产一般需要静态资产，即precompilation:

在生产环境中 Sprockets 使用指纹方案以上概述。默认情况下，Rails 假定资产已经预编译并将由您的网络服务器作为静态资产提供。

资产预编译是 Rails 将你的 CSS / Image / Javascript 文件“编译”成一系列"minified" versions - 使它们的加载效率更高

预编译过程的问题实际上是丢失了文件的所有“动态”方面，这意味着如果你想包含asset-url之类的东西，你需要使用preprocessor来管理动态方面这些文件。

【讨论】：

感谢您的解释。我使用 bundle exec rake assets:precompile RAILS_ENV=production 预编译了我的代码，但问题总是在这里。我不知道如何绕过这个：/
你没有使用 sass，它提供了 helpers。

【解决方案2】：

感谢在此处和其他地方找到的多个答案，我解决了我的问题（抱歉，再也找不到哪里了）。这是我在不将所有资源放入公共文件夹的情况下使事情正常进行的解决方案。

我删除了 public/images & stylesheets & javascript 中的所有资源
我将 style.css 重命名为 style.css.scss.erb
我将 CSS 中的每个 background: url("../images/xxx.png"); 替换为 background: url(<%=asset_path "xxx.png"%>);
我在投入生产之前执行了这个命令：bundle exec rake assets:precompile RAILS_ENV=production

感谢@RichPeck 的帖子，它帮助我了解资产管道的流程

【讨论】：