Heroku 不显示 SCSS 背景图像

Posted 2023-03-13

【中文标题】Heroku 不显示 SCSS 背景图像

【英文标题】：Heroku Not Showing SCSS Background Images

【发布时间】：2016-09-20 23:31:42

【问题描述】：

我有一个 Rails 应用程序，它使用来自 style.css.scss 文件的背景图像。我找到了多种让图像显示在localhost 上的方法，但没有办法让它们显示在 Heroku 上。

我查看了很多关于 SO 的帖子，例如 this 和 this，以及其他网站，例如 this，但到目前为止没有任何效果。

这是我在style.css.scss 中的代码：

.hero-000 
    width: 102%;
    background: url(asset-path("hero-000.jpg")) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

但是，我也尝试了background-image、image-url、asset-url 以及链接的 SO 帖子中的许多其他排列。

我的production.rb 文件中有这个：

  config.serve_static_files = true
  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
  config.assets.compile = true
  config.assets.digest = true

这在我的 application.html.erb 文件中调用 css 表：

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

根据其他帖子的建议，我已将此添加到我的 application.rb：

config.assets.initialize_on_precompile = false

任何关于如何解决这个问题的想法都会很高兴收到！

附加信息

这是我的 gemfile：

source 'https://rubygems.org'

gem 'rails', '4.2.5'

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

group :development do
  gem 'sqlite3'
  gem 'binding_of_caller'
  gem 'better_errors'
end

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'friendly_id', '~> 5.1.0'
gem 'google-analytics-rails', '1.1.0'
gem 'paperclip'
gem 'meta-tags'
gem 'bootsy'
gem 'devise'

这是我在 localhost 中的控制台错误：

在 Heroku 中：

【问题讨论】：

图片是否在源代码管理中？你能验证图像在 heroku 上吗？

你如何检查？

您是否有可以发布的指向该页面的公共链接？查看生成的源代码可能会提供线索。

图片是在公共目录下，还是在app/assets下？

我的heroku链接是pure-gorge-23608.herokuapp.com

【参考方案1】：

如果您想在样式表中使用asset_path，您需要将它们转换为 ERB 模板。示例：application.css.erb -- 这使得 asset_path 帮助器在模板中可用。

然而，在大多数情况下，要使用的正确方法是image-url()。只需确保以正确的方式使用它：

background-image: image-url("hero-000.jpg");          # < Correct
background-image: url(image-url("hero-000.jpg"));     # < Incorrect

【讨论】：

有了background-image: image-url("hero-000.jpg")，它甚至不会出现在我的localhost上。

什么版本的导轨？另外，您的样式是如何包含在模板中的？通过 css 导入还是从 html 中包含？

我使用的是 rails 4.2.5，它附在 assets/stylesheets/style.css.scss 中，但我也尝试（无济于事）将其放入 html。

好的，我尝试将我的 style.css.scss 文件转换为 style.css.scss.erb 因为 Heroku 帮助文档说你必须有 erb css 表才能在 Rails 4 中使用 css 资产。现在我得到了我的 css.scss.erb 工作表显示 File to import not found or unreadable: 的错误。我认为我们在正确的轨道上，但我不知道如何克服这个错误......

会不会是文件名的问题？试试style.scss.erb 或style.css.erb 看看这两者中的任何一个是否给出不同（或没有）错误。告诉我

【参考方案2】：

好的，Liz，我已经解决了这个问题。 如果在production 模式下运行服务器，只需将行添加到您的config/environments/production.rb，如果在development 模式下运行服务器，则添加config/environments/development.rb

config.BASE_URL = 'https://herokuapp.com/'

然后

background: url(https://herokuapp.com/assets/hero-000.jpg) no-repeat center center fixed;

默认情况下找不到图像herokuapp为您的应用创建子域。

试试这个：

将该图像复制到public/img 文件夹，然后执行以下操作

background: url(https://pure-gorge-23608.herokuapp.com/img/hero-000.jpg) no-repeat center center fixed;

【讨论】：

不幸的是没有运气。它仍然没有出现在 localhost 或 Heroku 上。我尝试了两种方式（在生产和开发中）。

可能是你做错了什么只需点击链接你会得到你的形象herokuapp.com/assets/stylesheet/hero-000.jpg

只需重新启动服务器，我认为它没有更新。您可以检查页面并将控制台错误发送给我

我尝试重新启动服务器，但无济于事。我还尝试在生产和开发中更改 config.BASE_URL。我添加了我的原始帖子以包含错误的屏幕截图。

sry liz 我已经添加了一个额外的磨损链接 stylesheets 添加但现在我更新了它检查一下

【参考方案3】：

[编辑]

在 Rails 4 资产管道文档 (2.3.2) 中找到了这个。我知道我之前发布了一个变体，但也许可以尝试下面的每一个，看看有什么用？

专门针对图片：

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

image-path("rails.png") 变为“/assets/rails.png”

也可以使用更通用的形式：

asset-url("rails.png") 变成 url(/assets/rails.png)

asset-path("rails.png") 变为“/assets/rails.png”

【讨论】：

我尝试将图像放在我的公用文件夹（预编译）中，它显示在 localhost 版本中，但不在 heroku 上。

是否可以删除“asset_path”并只使用基本的相对路径？我想知道这是否引起了一些问题 - 我不明白为什么 Heroku 甚至会链接到您的 Dropbox 文件夹？

我在不同的计算机上工作，所以整个应用程序都位于我的 Dropbox 文件夹中。不，没有asset_path，它不会出现在 Heroku 上。使用asset_path（在css.erb样式表中）它给了我一个file to import not found or unreadable错误。

啊，这可能是问题所在。 Heroku 将无法访问您的 Dropbox。您可以在多台计算机上工作并仍然更新同一个应用程序的一种方法是使用 Github：github.com 这是一个版本控制软件（如果您对应用程序的代码公开感到满意，这是免费的），您可以在其中 fork 和clone 您的目录以获取计算机上的最新文件，包括图像。如果有很多图像，那么最好将图像托管在单独的服务器上。 （顺便说一句，对不起，如果您已经知道这并不能解决您的问题！）

但是在我的 HTML 中链接的任何图像都很好......这只是 CSS 的。这仍然是 Dropbox 的问题吗？

【参考方案4】：

看看你的路径。它一定与你的配置有关。您已经在某处的代码中获得了绝对路径，或者它正在跟踪相关的东西。搜索您的代码库并确保您没有在任何地方硬编码您自己机器的绝对路径。确保这一切都是相对的。 /Users/elizabethbayardelle/Dropbox/Code/BIA/ 不应该在您的源代码中的任何位置，而是在您的 herokuapp 实例中使用它的某个位置。在您的本地主机屏幕截图上，您甚至有一条到heroku.com 的路径... 怎么样？我敢肯定，第二次接管您的配置方式将解决此问题。

【讨论】：

感谢您抽出宝贵时间查看此内容。 （并且称我不是一个完全的业余爱好者……有时候感觉不是这样。）我绝对没有任何硬编码，因为一切都是使用项目路径完成的。我尝试了硬链接到 heroku 作为一种潜在的解决方法，但它也没有奏效。

您根本不想使用任何硬编码路径。您所说的项目路径到底是什么意思？您是否尝试过放弃路径辅助函数而只是明确地写入相对路径？如果你能够让它在本地工作，那么你可以看到 herokuapp 实例的不同之处（IIRC 唯一的 heroku 控制是数据库实例化）。如果您的设置处于相同状态并在控制台中给出相同的错误，那么您在某处存在路径问题，因为您的 osx 路径已到达 herokuapp 实例

是的。我尝试了两种方法，但得到了相同的结果。如果你在下面查看我的“答案”，我最终只是放弃了 CSS 链接的图像，转而支持 erb link_to 路径或 html href 链接，由于某种原因，这两者都转移到了 Heroku。

我刚刚在您的另一个 cmets 中看到您在保管箱文件夹中处理您的源代码？不知道结果如何，但这可能不是一个好主意。你使用 git 的源代码控制吗？你想在项目上工作，就好像它一直处于服务状态。您可能已经为许多红鲱鱼在您的 Dropbox 环境中的工作状态而烦恼，但在其他任何地方都被破坏了。没有看到项目就很难猜测，但是哦。

【参考方案5】：

我认为 Heroku 的主要问题是，它无法加载 bootstrap.css。你必须先解决这个问题。

对于引导支持，添加这两个 gem，

gem 'therubyracer'
gem 'less-rails-bootstrap'

在 jquery_ujs 引用之后的 application.js 中指定这一点。

//= require twitter/bootstrap 

application.css 在 require_tree 之前。

*= require twitter/bootstrap

然后从您的视图文件中的<head> 中删除引导程序href 引用。

我认为这将帮助您了解更多。 http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html

【讨论】：

我使用的是 SASS，而不是 Rails。这是否适用于 bootstrap-sass 而不是 less-rails-bootstrap？

起初我也尝试过使用'bootstrap-sass'，但它根本不适用于自定义主题。但是使用“less-rails-bootstrap”它可以完美运行。我想试试看，我认为它应该工作。 (y)

sass和less能和平共处还是必须卸载sass？

最好去掉 sass。只有'less-rails-bootstrap'所有引导功能在部署到heroku后都可以正常工作。 intense-brushlands-1551.herokuapp.com

【参考方案6】：

试试这个：

rake assets:precompile RAILS_ENV=production

由于预编译仅在生产模式下完成，无需显式指定环境。

更新：

尝试将以下行添加到您的 Gemfile：

group :assets do
  gem 'therubyracer'
  gem 'sass-rails', "  ~> 3.1.0"
  gem 'coffee-rails', "~> 3.1.0"
  gem 'uglifier'
end

然后bundle install

希望它有效:)

【参考方案7】：

我发现与您的配置相关的多个问题。您发布的图像显示 404 错误，但 localhost 上的错误与 Heroku 应用程序上的错误不同。 Heroku 应用程序上的那些与 CSS 文件的绝对路径相关，一旦您解决了这些错误，您将能够在 Heroku 上看到图像。

Heroku 应用正在引用引导文件的绝对路径。绝对路径指向 localhost 上的文件。由于该文件存在于 localhost 上，因此在 localhost 上查看应用程序时不会像在 Heroku 上那样产生同样的问题。

仔细查看您发布的错误消息中的 URL： https://pure-gorge-23608.herokuapp.com/Users/yourname/Dropbox/Code/BIA/app/assets/stylesheets/bootstrap.css Failed to load resource: the server responded with a status of 404 (Not Found)

尝试在您的代码库中搜索该绝对路径。如果您使用的是 Mac 或类似的 Unix 环境， ack /Users/yourname/Dropbox/Code/BIA

提示：How do I find all files containing specific text on Linux?

当您找到包含对引导文件的绝对路径引用的文件时，请更改引用，使其成为相对路径而不是绝对路径。

如果你在 Windows 本地主机上，你也可以使用 find in files，但我已经很久没有在 Windows 上工作了。 http://www.howtogeek.com/99406/how-to-search-for-text-inside-of-any-file-using-windows-search/

祝你好运，继续努力，您的网站看起来很有前途！

【讨论】：

查看文件名application.scss 或application.css.scss。您的@import 中有一个绝对路径。

你在复制我的答案

@Jonathan，我确定了应用程序中绝对路径导致 404 错误的特定位置，它位于 application.scss 或 application.css.scss。我觉得我的回答更准确。

【参考方案8】：

不幸的是，在这里所有精彩的答案之间，我从未解决过问题。不过，我确实想出了一个稍微笨拙的解决方法，使用来自 html.erb 文档而不是 .css.scss 文档的 erb 链接图像。

我在 HTML 中以这种方式链接图像：

<div class="row hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'bg-hero-000.jpg', class: "hero-image",alt: "strong man and woman lifting weights" %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

然后使用 CSS 为图像创建背景感：

.hero-image-outer 
   width: 300%;
   height: 600px;
   overflow-y: hidden !important;
   border-bottom: solid thick red;
 

 .hero-image-inner 
   width: 66%;
   overflow-x: hidden !important;
 

 .hero-image 
   height: 600px;
   margin-left: -50%;
   z-index: 0 !important;
 

 @media screen and (min-width: 1100px) 
   .hero-image-outer 
     width: 100%;
   

   .hero-image-inner 
     width: 100%;
     height: 600px;
   

   .hero-image 
     width: 100%;
     height: auto;
     margin-left: 0%;
   
 

 .overlap-hero-image 
   margin-top: -500px;
   height: 500px;
 

绝对不是完美的，它并没有解决 2016 年的 Heroku CSS 图像之谜，但它对于本网站的用途来说已经足够好了。感谢我所有的回答者花时间和我一起深入研究这个问题。

【讨论】：

根据 SO，github 停止了消息传递，所以我将您添加为协作者。随意看看与否，因为我已经在使用上述解决方法。但是，我总是很想知道哪里出了问题，因为这是一个谜。

【参考方案9】：

我有同样的问题，我正在使用

background: url("/assets/homebackground.jpg") no-repeat center center fixed;

在我的 application.css 上。它在本地主机上工作，但在 Heroku 上没有显示图像。我将以下内容从 false 更改为 true：

# config/environments/production.rb
   YOURAPPLICATION::Application.configure do

   # your config settings
   config.assets.compile = true

   # your other config settings
end