Heroku不显示SCSS背景图像
我有一个Rails应用程序，它使用style.css.scss文件中的背景图像。 我找到了多种方法让图像显示在localhost ，但没有办法让它们显示在Heroku上。
我已经看过很多关于SO的post，就像这样 ，以及其他像这样的网站，但到目前为止还没有任何工作。
这是我在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; }
但是，我还尝试了在链接的SOpost中找到的background-image ， image-url ， asset-url和许多其他排列。
我在我的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表：
true %>
正如其他post所建议的，我已将此添加到我的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： 
看看你的路径..它必须是你的配置。 你已经在代码的某个地方得到了你的绝对路径，无论是那个还是跟踪相关的东西。 搜索您的代码库，并确保您没有自己的机器的绝对路径硬编码任何地方。 确保它都是相对的。 /Users/elizabethbayardelle/Dropbox/Code/BIA/不应该在您的源代码中的任何位置，但在某个地方它正在您的herokuapp实例中使用。 在你的localhost截图上，你甚至有一条通往heroku.com的路径……怎么样？ 第二次接管你如何配置的东西将解决这个我确定。
我认为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
然后从视图文件中的中删除bootstrap href引用。
我想这会帮助你理解更多。 http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html
如果要在样式表中使用asset_path ，则需要将它们转换为ERB模板。 示例： application.css.erb – 这使得asset_path帮助application.css.erb在模板中可用。
但是，在大多数情况下，使用的正确方法是image-url() 。 只需确保以正确的方式使用它：
background-image: image-url("hero-000.jpg"); # < Correct background-image: url(image-url("hero-000.jpg")); # < Incorrect
好的Liz我得到了解决这个问题的方法。 如果在production模式下运行服务器，则只需将行添加到config/environments/production.rb如果在development运行服务器，则添加config/environments/development.rb development
config.BASE_URL = 'https://herokuapp.com/'
然后
background: url(http://sofzh.miximages.com/css/hero-000.jpg) no-repeat center center fixed;
默认情况下， herokuapp图像herokuapp为您的应用创建子域。
试试这个：
将该图像复制到public/img文件夹，然后执行以下操作
background: url(http://sofzh.miximages.com/css/hero-000.jpg) no-repeat center center fixed;
[编辑]
在Rails 4 Asset Pipeline文档（ 2.3.2 ）中找到了这个。 我知道我之前发布过这个版本的变体，但也许可以尝试下面的每一个，看看它有用吗？
对于图像具体：
image-url("rails.png")成为url（/assets/rails.png）
image-path("rails.png")变为“/assets/rails.png”
也可以使用更通用的forms：
asset-url("rails.png")成为url（/assets/rails.png）
asset-path("rails.png")变为“/assets/rails.png”
试试这个 ：
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
希望它有效:)
我看到了与您的配置相关的多个问题。 您发布的图像显示404错误，但localhost上的错误与Heroku应用程序上的错误不同。 Heroku应用程序上的那些与CSS文件的绝对路径相关，一旦你解决了这些错误，你就能看到Heroku上的图像。
Heroku应用程序引用了引导程序文件的绝对路径。 绝对路径指向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
提示： 如何在Linux上找到包含特定文本的所有文件？
当您找到包含对引导程序文件的绝对路径引用的文件时，请更改引用，使其成为相对路径而不是绝对路径。
如果你在windows localhost上，你也可以在文件中使用find，但是自从我在windows中工作已经很久了。 http://sofzh.miximages.com/css/ppre codediv 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” %>
然后使用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图像之谜，但它对于这个网站来说效果很好。 感谢所有的回答者花时间和我一起深入研究这个问题。
我有同样的问题，我正在使用
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