heroku - 在 Rails 4 中使用 jQuery UI 主题 - 不提供图像

Question

我目前正在使用带有 jQ​​uery UI 的 Rails 4.0.2(主要用于日期选择器)。我的生产环境是 Heroku。

我的主要问题是我的主题的图像没有在生产中提供(虽然它在开发中运行良好)。我在 application.css 中包含了这样的主题 css :

 *= require_self
 *= require_tree .
 *= require jquery-ui-1.10.4.custom

主题的 css 显示正常，但没有任何图像正常工作。我已经阅读了关于 StackOverflow 的无尽问题、博客和 Github 上的讨论——没有一个对我有用。我还通读了 Edge Rails 指南，该指南没有提及图像预编译，尽管从 Github 上的讨论来看，这似乎在 Rails 4 中确实发生了变化。

这是我当前的目录结构:

/vendor
  /assets
    /stylesheets
      jquery-ui-1.10.4.custom.css
      /images
        animated-overlay.gif
        ui-bg_flat_0_aaaaaa_40x100.png
        (more images like these)

据我所知，集成外部 css 和 javascript 库的正确方法是将这些 Assets 放在/vendor/assets 中，这就是我正在做的。

同样，我的问题是 rails 断然拒绝为生产中的任何 Assets 提供服务。我可以摆弄图像 URL，但它根本没有得到服务。

以下是我尝试过的事情:

强制 Rails 4 预编译图像

如果我运行 rake assets:precompile我只在 public/assets 中看到 2 个文件 - 一个 css 文件和一个 javascript 文件。我假设这是错误的，Rails 实际上也应该将我的图像放在那里。

根据这个问题 - rails 4 asset pipeline vendor assets images are not being precompiled - 你需要明确地告诉 Rails 你想要预编译图像。 (这对我来说似乎很疯狂，因为我很确定我不是互联网上唯一提供图像的 Rails 4 站点。其他人都只使用文本和 ASCII 艺术吗？)

所以我把这个加到我的 application.rb :

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

现在当我运行时 rake assets:precompile我所有的供应商 Assets 都被编译、指纹识别并放入 public/assets/images .但这对生产没有影响，我怀疑 Rails 只是拒绝提供默认 Assets ，只会提供指纹 Assets 。

手动包含供应商图像路径

我读过的一些其他内容建议您需要手动指定图像路径，如果它在应用程序/ Assets 之外(因为我的在供应商/ Assets 中，这似乎符合条件)。

config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'images')

当我现在运行 rake assets:precompile我的图像不再被预编译或指纹识别，但它们也不再用于生产。

根据这篇博文 - JQuery-UI css and images, and Rails Asset Pipeline - 这是因为 Sprockets 会看到一条路径已经包含在其中并将其排除在外，您可以通过在 application.rb 中添加路径来修复它。 .

initializer :after_append_asset_paths, 
            :group => :all, 
            :after => :append_assets_path do
   config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "images").to_s
end

这也没有效果。当我运行 rake assets:precompile 时，它​​不会编译或指纹我的图像，也不会出现在生产中。那篇文章是针对 Rails 3 的，所以我并没有抱太大希望。

将所有图像移动到应用程序/ Assets /图像

尽管这对我来说似乎是错误的(在 Rails 意义上)我将所有图像移动到应用程序/ Assets /图像。这仍然有相同的结果 - 图像没有出现在生产中。我还尝试将其与强制将图像包含在编译中的技巧结合起来:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

但它没有任何效果。我怀疑 Rails 只是固执，而不是为非指纹 Assets 服务。

我尝试过的其他事情

请求的图像是通过 css 完成的，所以如果我查看实际主题的 css 文件，会有如下几行:

background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;

我读到的一些东西(主要是在 Github 和博客文章的评论/投诉中)表明 /images在 url 的开头与我搞砸了。所以我手动进入文件并在任何地方删除它，这没有任何影响 - 这意味着图像仍然没有出现在生产中。

我不想尝试的事情

根据这篇文章 - Rails 4: How To Fix The Heroku Assets Not Found CSS Image Issue - 我应该将此添加到我的 production.rb

config.assets.compile = true

我真的不想这样做，因为 Assets 管道默认情况下会这样做，据我所知(这可能是完全错误的)，这对性能来说真的很糟糕。出于同样的原因，我不想继续添加

config.serve_static_assets = false

到我的 production.rb因为我不希望 Rails 在生产中提供静态 Assets - 我希望 Apache/nginx 这样做。

你应该如何在 Rails 4 中做到这一点？ 请帮忙!

Answer 1

我终于设法解决了这个问题。解决方案有 2 个部分。首先，您需要告诉 Rails 预编译图像。据我所知，Rails(自 4.0 起)将不再自动执行此操作以防止您包含的 gem 在您不真正想要它时预编译其所有 Assets 。

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

现在你的图像应该得到预编译(你可以通过 running rake assets:precompile 来检查这一点，并在 public/assets 中查看结果)。

现在您需要更改 JQuery UI 主题以引用指纹图像而不是纯图像 URL。因此，将主题的文件扩展名更改为 .scss (就我而言，它是 jquery-ui-1.10.4.custom.css.scss )并在您的主题中进行查找和替换 - 更改 url到 SASS 助手 image-url .所以，作为一个例子，

url(images/ui-bg_glass_65_ffffff_1x400.png)

变成

image-url('images/ui-bg_glass_65_ffffff_1x400.png')