在Rails 4中使用jQuery UI主题 - 没有图像被投放 [英] Using a jQuery UI Theme with Rails 4 - No Images being served

问题描述

我目前使用Rails 4.0.2和jQuery UI（主要用于datepicker）。我的制作环境是Heroku。

我的主要问题是我的主题图像没有在生产中投放（尽管它在开发中工作正常）。我在 application.css 中包含主题的css：

  * = require_self 
 * = require_tree。 
 * =要求jquery-ui-1.10.4.custom 
  

主题的CSS显示很好，但没有任何图像正在工作。我已经通过StackOverflow，博客和Github上的讨论阅读了无数问题 - 这些问题都不适合我。我还通读了Edge Rails指南，它没有提到关于图像预编译的字眼，尽管从Github的讨论看来，它在Rails 4中确实发生了变化。

这是我目前的目录结构：

  /供应商
 /资产
 /样式表
 jquery-ui-1.10.4.custom.css 
 / images 
 animated-overlay.gif 
 ui-bg_flat_0_aaaaaa_40x100.png 
（更多图片像这样）
  

就我所知，集成外部CSS和JavaScript库的正确方法是将这些资产放在/ vendor / assets所以这就是我所做的。

我的问题是，我的问题是，铁路公司拒绝提供生产中的任何资产。

以下是我尝试过的内容：

h2>强制Rails 4预编译映像

如果我运行 rake assets：precompile / assets - 一个css文件和一个javascript文件。我假设这是错误的，Rails应该把我的图片放在那里。

根据这个问题 - rails 4资产管道供应商资产图像未被预编译 - 您需要明确告诉Rails，你想要图像预编译。 （这对我来说似乎很疯狂，因为我非常确定我不是互联网上唯一提供图像的Rails 4站点。其他人都只是使用文本和ASCII艺术？）

所以我将它添加到我的 application.rb中：

  config.assets.precompile + =％w（* .png * .jpg * .jpeg * .gif）
  

<现在，当我运行 rake assets：precompile 时，我的所有供应商资产正在编译，指纹识别并放入 public / assets / images 。这对生产没有任何影响，但我怀疑Rails只是拒绝提供默认资产，并且只会提供指纹资产。

手动包含供应商图片路径

我读过的其他一些内容表明，如果应用程序/资产之外需要手动指定图像路径（因为我的供应商/资产似乎在

  config.assets.paths<< Rails.root.join（'vendor'，'assets'，'stylesheets'，'images'）
  

当我现在运行 rake assets：precompile 时，我的图像不再被预编译或指纹识别，但它们也没有被投入生产。

据此博客文章 - JQuery-UI css和图像，以及Rails资产管道 - 这是因为Sprockets会看到一个路径已经包含在内，并且会排除它，你可以通过预先考虑 application.rb 。

 初始化程序：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文件，有这样的行：

 背景：#aaaaaa url（images / ui-bg_flat_0_aaaaaa_40x100.png）50％50％repeat-x; 
  

我读过的一些内容（主要在Github和博客文章的评论/投诉中） code> / images 在网址的开头正在与我搞砸。所以我手动进入文件并将它移到任何地方，这没有任何效果 - 这意味着图像仍然没有出现在制作中。

我不想要的东西尝试

根据这篇文章 - Rails 4：如何修复未找到的Heroku资产CSS图像问题 - 我应该将此添加到我的 production.rb

  config.assets.compile = true 
  

我真的不希望这样做，因为资产管道默认是这样做的，根据我的知识（这可能是完全错误的），这对性能来说真的很糟糕。出于同样的原因，我不想继续前进并添加

  config.serve_static_assets = false 
 
 code> 

添加到我的 production.rb 中，因为我不想让Rails服务静态资产正在生产中 - 我希望Apache / nginx来做到这一点。

您应该如何在Rails 4中完成这项工作？请帮助！

解决方案

我终于设法解决了这个问题。解决方案有两部分。首先，你需要告诉Rails预编译图像。至于我可以告诉Rails（自4.0以来）将不再自动执行此操作，以防止您包含的所有资源在您不需要这些资源时进行预编译。

  config.assets.precompile + =％w（*。png * .jpg * .jpeg * .gif）
  

现在你的图像应该被预编译（你可以通过运行rake资源来检查它：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'）
  

I am currently using Rails 4.0.2 with jQuery UI (mostly for the datepicker). My production environment is Heroku.

My main problem is that the images for my theme are not being served in production (while it works fine in development). I am including the theme's css like this in my application.css:

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

The theme's css is showing up fine, but none of the images are working. I have read through endless questions on StackOverflow, blogs and discussions on Github - none of which have worked for me. I also read through the Edge Rails guide which doesn't mention a word about image precompilation, even though from the discussions on Github it seems that this has really changed in Rails 4.

Here is my current directory structure:

/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)

As far as I know the correct way of integrating external css and javascript libraries is to put those assets inside /vendor/assets so that is what I'm doing.

So again, my problem is that rails flatly refuses to serve any assets in production. I can fiddle with the image URL, but it's simply not getting served.

Here are things I have tried:

Force Rails 4 to precompile images

If I run rake assets:precompile I only see 2 files inside public/assets - a css file and a javascript file. I'm assuming this is wrong and that Rails should actually put my images there as well.

According to this question - rails 4 asset pipeline vendor assets images are not being precompiled - you need to explicitly tell Rails that you want images to be precompiled. (This seems rather insane to me, since I am pretty sure I am not the only Rails 4 site on the internet serving images. Is everyone else just using text and ASCII art?)

So I added this to my application.rb:

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

Now when I run rake assets:precompile all my vendor assets are being compiled, fingerprinted and put in public/assets/images. This has no effect in production though, I suspect that Rails is simply refusing to serve the default assets and will only serve the fingerprinted assets.

Manually include the vendor images path

Some of the other things I read suggested that you need to manually specify the images path if it is outside of app/assets (since mine is in vendor/assets this seems to qualify).

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

When I now run rake assets:precompile my images are no longer being precompiled or fingerprinted, but they are also not being served in production.

According to this blog post - JQuery-UI css and images, and Rails Asset Pipeline - this is because Sprockets will see that a path is already included and will exclude it and you can fix it by prepending the path in 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

This also had no effect. When I run rake assets:precompile it doesn't compile or fingerprint my images and it doesn't show up in production. That post is targeted at Rails 3 so I didn't really have high hopes.

Move all images to app/assets/images

Even though this seems wrong to me (in the Rails sense) I moved all the images to app/assets/images. This still had the same result - images are not showing up in production. I also tried combining this with the trick of forcing images to be included in compilation:

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

But it didn't have any effect. I suspect Rails is simply being stubborn and not serving the non-fingerprinted assets.

Other things I have tried

The images being requested are done via css, so if I look in the actual theme's css file there are lines like this:

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

Some things I read (mostly in the comments/complaints on Github and blog posts) suggested that the /images at the beginning of the url is screwing with me. So I manually went into the file and removed it everywhere, which had no effect - meaning images still didn't show up in production.

Things I don't want to try

According to this post - Rails 4: How To Fix The Heroku Assets Not Found CSS Image Issue - I should add this to my production.rb

config.assets.compile = true

I really don't want to do that since the asset pipeline does it by default and according to my knowledge (which might be completely wrong) it would be really bad for performance. For the same reason I don't want to just go ahead and add

config.serve_static_assets = false

to my production.rb since I don't want Rails serving static assets in production - I want Apache/nginx to do it.

How are you supposed to do this in Rails 4? Please help!

解决方案

I finally managed to fix this issue. There are 2 parts to the solution. Firstly, you need to tell Rails to precompile images. As far as I can tell Rails (since 4.0) will no longer do this automatically to prevent gems you include from having all their assets precompiled when you don't really want this.

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

Now your images should be getting precompiled (you can check this by running rake assets:precompile and looking at the results in public/assets).

Now you need to change your JQuery UI theme to reference the fingerprinted images instead of the plain image URL. So change the theme's filename extension to .scss (in my case it was jquery-ui-1.10.4.custom.css.scss) and do a find and replace in your theme - changing url to the SASS helper image-url. So, as an example,

url(images/ui-bg_glass_65_ffffff_1x400.png)

becomes

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

这篇关于在Rails 4中使用jQuery UI主题 - 没有图像被投放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！