在Rails 4中使用jQuery UI主题 - 没有提供图像

时间:2014-01-25 21:24:26

标签: heroku ruby-on-rails-4 asset-pipeline

我目前正在使用带有jQuery UI的Rails 4.0.2(主要用于datepicker)。我的生产环境是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库的正确方法是将这些资产放在/ vendor / assets中,这就是我正在做的事情。

同样,我的问题是,rails坚决拒绝为生产中的任何资产提供服务。我可以摆弄图片网址,但它根本没有得到服务。

以下是我尝试过的事情:

强制Rails 4预编译图像

如果我运行rake assets:precompile我只在公共/资产中看到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时,我的所有供应商资产都被编译,指纹识别并放入public/assets/images。这对生产没有影响,我怀疑Rails只是拒绝提供默认资产,只会提供指纹资产。

手动包含供应商图像路径

我读到的其他一些建议表明,如果它位于app / 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资产时:预编译它不会编译或指纹我的图像,它不会出现在生产中。这篇文章的目标是Rails 3,所以我并没有真正寄予厚望。

将所有图像移至app / assets / images

即使这对我来说似乎不对(在Rails意义上)我将所有图像移动到app / assets / images。这仍然有相同的结果 - 图像没有出现在生产中。我也尝试将其与强制图像包含在编译中的技巧相结合:

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

但它没有任何效果。我怀疑Rails只是顽固而不服务于非指纹资产。

我尝试过的其他事情

请求的图像是通过css完成的,所以如果我查看实际主题的css文件,就会出现这样的行:

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

我读过的一些内容(主要是关于Github和博客文章的评论/投诉)表明,网址开头的/images与我有关。所以我手动进入文件并在任何地方将其删除,这没有任何效果 - 这意味着图像仍然没有出现在制作中。

我不想尝试的事情

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

config.assets.compile = true

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

config.serve_static_assets = false

到我的production.rb,因为我不希望Rails在生产中提供静态资产 - 我希望Apache / nginx能够做到这一点。

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

1 个答案:

答案 0 :(得分:3)

我终于设法解决了这个问题。该解决方案有两个部分。首先,您需要告诉Rails预编译图像。据我所知,Rails(自4.0起)将不再自动执行此操作,以防止您包含的宝石在您不想要的时候预编译所有资源。

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

现在您的图片应该进行预编译(您可以通过running rake assets:precompile查看并查看公共/资源中的结果。)

现在您需要更改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')