Question

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

我查看过很多帖子，例如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

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

附加信息

这是我的宝石文件：

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中：

Answer 1

查看您的路径..它必须是您的配置。你已经在代码的某个地方获得了绝对的路径，无论是那个还是它正在跟踪相关的东西。搜索您的代码库，并确保您没有自己的机器的绝对路径硬编码任何地方。确保它都是相对的。 /Users/elizabethbayardelle/Dropbox/Code/BIA/不应该在您的源代码中的任何位置，而是在您的herokuapp实例中使用它的某个地方。在您的localhost屏幕截图中，您甚至可以找到heroku.com的路径......怎么样？第二次接管你如何配置的东西将解决这个问题我确定。

Answer 2

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

对于bootstrap支持，添加这两个gem，

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

在jquery_ujs引用之后的application.js中指定了这个。

//= require twitter/bootstrap

在require_tree之前的

application.css。

*= require twitter/bootstrap

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

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

Answer 3

如果要在样式表中使用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

Answer 4

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

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;

Answer 5

[编辑]

在Rails 4 Asset Pipeline文档（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”

Answer 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

希望它有效：）

Answer 7

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

Heroku应用程序引用了一个引导程序文件的绝对路径。绝对路径指向localhost上的文件。由于该文件存在于localhost上，因此在本地主机上查看应用程序时不会像在Heroku上那样创建相同类型的问题。

仔细查看您发布的错误消息中的网址： 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 localhost上，你也可以使用find in files，但是自从我在windows工作以来已经很久了。 http://www.howtogeek.com/99406/how-to-search-for-text-inside-of-any-file-using-windows-search/

祝你好运，坚持下去，你的网站看起来很有希望！

Answer 8

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

我在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形象之谜，但它对于这个网站来说效果还不错。感谢所有的回答者花时间和我一起深入研究这个问题。

Answer 9

我遇到了同样的问题，我正在使用

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

在我的application.css上。它适用于localhost，但没有在Heroku上显示图像。我将以下内容从false更改为true：

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

   # your config settings
   config.assets.compile = true

   # your other config settings
end

Heroku不显示SCSS背景图像

9 个答案: