Rails 图像资源未加载

Posted 2023-03-29

【中文标题】Rails 图像资源未加载

【英文标题】：Rails Image Assets Not Loading

【发布时间】：2014-05-18 21:18:01

【问题描述】：

大约一周以来，我一直在处理生产中的 Rails 资产管道的复杂性。我终于快完成了。我在一个 css 文件中引用了两张图片。

正在预编译 css 文件，并且在文件中相应地引用了预编译的图像。

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

#introbackground:#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 和乘客的数字海洋服务器。

【问题讨论】：

确保 nginx 为您的资产提供服务。 dennisreimann.de/blog/configuring-nginx-for-the-asset-pipeline 不过具体问的不是很清楚，遇到了什么问题？

我网站上的图片无法加载。特别是我在css中列出的那些。所以，我想弄清楚为什么它们不会出现。我可以查看它们，例如162.243.242.52/assets/…，但它们不会出现在我的网页上。我以前看过那个链接。我已经设置了 nginx.conf 和我的 production.rb，所以我不确定我还需要做什么。

我认为问题出在你的 CSS 上。使用 Chrome 中的开发人员工具，显然正在加载图像。但是 css 中有一些错误，导致它们无法被看到。也许是一个高度为 0 的 div 或其他东西。

#intro 背景：#111 url("") 无重复中心；溢出：隐藏；

标题高度：54px;宽度：100%； z 指数：99999；背景： url("");位置：固定；顶部：0；左：0；

【参考方案1】：

我认为你的问题在这里：

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

---

助手

有一个名为 asset_url 的助手，强烈推荐用于 CSS。我会这样做：

#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 的职权范围内）

【讨论】：

如何从javascript调用asset_url或asset-url方法？

对于rails 6，我使用asset-url而不是答案中的asset_url（注意-而不是_）。这篇博文帮助我修复了错误Assets, Webpacker and Rails 6. Why your images and css aren’t showing up. -Heroku vs Development