Rails圖像資產未加載

Question

我已經處理了大約一個星期的生產中的Rails資產管道的復雜性。 我終於快完成了。 我在css文件中引用了兩個圖像。

正在對css文件進行預編譯，並且在文件中相應地引用了預編譯的映像。

background:url(/assets/k-opacity-70-f75f0169dbfb178b3aedbf11429dfd68.png);

#intro{background:#111 url(/assets/intro-bg-12afabffede338ee9a72dbff2488bfea.jpg) no-repeat center;

我已經根據Rails網站上的建議編輯了config / application.rb，以確保可以預編譯所需的所有文件。

 config.assets.precompile << Proc.new do |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path).to_path
    app_assets_path = Rails.root.join('app', 'assets').to_path
    if full_path.starts_with? app_assets_path
      puts "including asset: " + full_path
      true
    else
      puts "excluding asset: " + full_path
      false
    end
  else
    false
  end
end

除了確保資產已預編譯之外，我還需要做些其他事情嗎？ 我的應用程序正在與Nginx和乘客一起部署到數字海洋服務器。

Answer 1

我認為您的問題在這里：

background: url("<%= asset_path 'k-opacity-70.png' %>"); position: fixed; top: 0; left: 0; }

---

幫手

強烈建議在CSS中使用一個名為asset_url的助手。 我會這樣做：

#app/assets/stylesheets/application.css.scss #-> notice the extension
background: asset_url("k-opacity-70.png");

這將確保正確引用您的資產，尤其是在將它們發送到服務器時。 這聽起來可能很簡單，但是我們以前在Heroku（我知道您使用過DO）中遇到過問題，因為指紋不正確，文件無法渲染

可能為此感到沮喪（因為它與您的代碼基本相同），但這對我們有用

---

指紋

其次，我將確保您的指紋圖像確實存在於您的public/assets文件夾中

預編譯過程通常會創建一系列images ， stylesheets和js文件，這些文件必須在資產中引用。 這是由我上面提到的幫助程序處理的，但這也意味着它們可能會被錯誤引用

-

如果您的文件夾中有正確的文件，則問題將在於您如何引用它們，否則預編譯過程本身將存在問題（這在application.css ）