Rails圖像和資產未正確加載

Question

例如，在我的Rails應用程序中，我有類似的東西：

.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

我手動調用資產的編譯：

bundle exec rake assets:precompile

並且在名稱末尾使用哈希創建文件：

wax-seal-small-Uuhqwduhqwdoi234983jewf.png

---

所以這不起作用：

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

但這很好（當我在Chrome中手動輸入時）：

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

---

我在這里錯過了什么一步？ 如何讓我的CSS規則添加到那個小哈希？

在config/environments/production.rb添加config.assets.compile = true可以使它工作，但我在Rails指南中讀到，由於顯着的性能命中，這是一個不好的做法。

Answer 1

我在edgerails文檔中找到了這個： http ：//edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS和Sass

使用資產管道時，必須重寫資源路徑，並且sass-rails為以下資產類提供-url和-path幫助程序（在Sass中用連字符表示，在Ruby中加以強調）：圖像，字體，視頻，音頻，JavaScript和樣式表。

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

也可以使用更通用的表單，但必須同時指定資產路徑和類：

• asset-url("rails.png", image) becomes url(/assets/rails.png)
• asset-path("rails.png", image) becomes "/assets/rails.png"

Answer 2

如果你使用sass或更少，你可以使用background: image-url("wax-seal-small.png");

這將預先添加文件的路徑並附加緩存區塊哈希。

否則只需將它引用到/ assets目錄。 例如background: url("/assets/wax-seal-small.png");