Heroku不显示SCSS背景图像

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

我已经看过很多关于这个和这个以及其他这样的网站的帖子,但是到目前为止没有任何工作。

这是我在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;
}

不过,我也尝试了在链接的SO帖子中找到的background-imageimage-urlasset-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工作表:

  <%= 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'

这里是我在本地主机上的控制台错误: 在这里输入图像描述

在Heroku中: 在这里输入图像描述


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


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

为了引导支持,添加这两个宝石,

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

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

//= require twitter/bootstrap 

require_tree之前的application.css。

*= require twitter/bootstrap

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

我想这会帮助你更多地理解。 http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html


如果您想在样式表中使用asset_path ,则需要将它们转换为ERB模板。 例如: application.css.erb - 这使得asset_path helper在模板中可用。

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

background-image: image-url("hero-000.jpg");          # < Correct
background-image: url(image-url("hero-000.jpg"));     # < Incorrect
链接地址: http://www.djcxy.com/p/13667.html

上一篇: Heroku Not Showing SCSS Background Images

下一篇: Find file in directory from command line