Rails 图像和资产未正确加载 [英] Rails images and assets not being loaded properly

问题描述

例如，在我的 Rails 应用程序中，我有类似的东西:

For example, in my Rails application I have something like:

.wax_seal {
  background: url("wax-seal-small.png");
  display: block;
  height: 100px;
  margin: 0 auto;
  width: 92px;
}

.wax_seal:active {
  background: url('wax-seal-small-broken.png');
}

在我的 config/environments/production.rb 文件中:

# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true

我手动调用了资产的编译:

I manually invoke the compiling of assets:

bundle exec rake assets:precompile

并且文件是在名称末尾使用散列创建的:

And the files are created with hashes at the end of the name:

wax-seal-small-Uuhqwduhqwdoi234983jewf.png

<小时>

所以这不起作用:

---

So this doesn't work:

background: url("wax-seal-small.png");

但这工作正常(当我在 Chrome 中手动输入时):

But this works fine (when I manually type it in Chrome):

background: url("wax-seal-small-Uuhqwduhqwdoi234983jewf.png");

<小时>

我在这里遗漏了什么步骤?如何让我的 CSS 规则添加到那个小哈希中?

---

What step am I missing here? How can I make my CSS rules add in that little hash?

在 config/environments/production.rb 中添加 config.assets.compile = true 使其工作，但我在 Rails 指南中读到这是一个不好的做法，因为到显着的性能影响.

Adding config.assets.compile = true in config/environments/production.rb makes it work, but I read in the Rails guide that it's a bad practice due to significant performance hits.

推荐答案

我在 edgerails 文档中找到了这个:http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

I found this in edgerails documentation: http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS 和 Sass

2.3.2 CSS and Sass

使用资产管道时，必须重写资产的路径，sass-rails 为以下资产类提供 -url 和 -path 帮助器(在 Sass 中用连字符表示，在 Ruby 中用下划线表示):图像、字体、视频、音频、JavaScript 和样式表.

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

• image-url("rails.png") 变成 url(/assets/rails.png)
• image-path("rails.png") 变成 "/assets/rails.png"

也可以使用更通用的形式，但必须同时指定资产路径和类别:

The more generic form can also be used but the asset path and class must both be specified:

• asset-url("rails.png", image) 变成 url(/assets/rails.png)
• asset-path("rails.png", image) 变为 "/assets/rails.png"

这篇关于Rails 图像和资产未正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！