我有一个Rails应用程序，它使用来自style.css.scss文件的背景图像。我找到了多种方法让图像显示在localhost上，但没有办法让它们显示在Heroku上。
我看过很多这样和这样的帖子，以及其他类似的站点，但是到目前为止还没有什么效果。
这是我的style.css.scss中的代码：
1
2
3
4
5
6
7
8
| .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文件中有这个：
1
2
3
4
| 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表：
1
| <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> |
正如其他帖子所建议的，我已经将其添加到了我的应用程序中。rb:
1
| config.assets.initialize_on_precompile = false |
关于如何解决这一问题的任何想法都会很高兴地收到！
附加信息
这是我的GemFile：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| 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上吗？
- 你怎么检查那个？
- 你有一个公共链接到你可以发布的页面吗？查看生成的源可能会给出一个线索。
- 图像是在公共目录中还是在app/assets下？
- 我的Heroku链接是pure-gorge-23608.herokuapp.com
- 照片在app/assets/images中。
- 请将您的GemFile添加到问题中，以便我们检查它
- 我编辑了原始的帖子，将gemfile包含在内。让我知道任何其他可能相关的信息。
- 你有Github回购协议吗？从源代码来看，它是唯一一个没有进行MD5散列的，因此它没有通过管道传递。这是CSS提供的唯一图像吗？此外，它是唯一一个从管道/资产的图像提供服务的
我认为Heroku的主要问题是它无法加载bootstrap.css。你必须先解决这个问题。
对于引导支持，添加这两个gem，
1
2
| gem 'therubyracer'
gem 'less-rails-bootstrap' |
在application.js中的jquery_js引用之后指定。
1
| //= require twitter/bootstrap |
application.css在需要树之前。
1
| *= require twitter/bootstrap |
然后从视图文件中的中删除bootstrap href引用。
我认为这将帮助你了解更多。http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html
- 我用的是Sass，不是Rails。这将与引导sass而不是更少的rails引导一起工作吗？
- 起初，我也尝试过"引导Sass"，但它根本不适用于定制主题。但是，使用"更少的Rails引导"，它工作得很好。我想试一试，我想应该管用。(Y)
- Sass能和平共处吗？还是我必须卸载Sass？
- 最好是把沙司去掉。由于只有"更少的Rails引导"，所有的引导函数在部署到Heroku之后都可以正常工作。密集灌木丛-1551.herokuapp.com
看看你的路……它必须与您的配置有关。你已经在代码中找到了你的绝对路径，要么就是它在某个相关的地方。搜索你的代码库，确保你没有自己的机器的绝对路径硬编码任何地方。确保这一切都是相对的。/Users/elizabethbayardelle/Dropbox/Code/BIA/不应该在您的源代码中的任何地方，而是应该在您的herokupp实例中使用它。在您的本地主机屏幕截图上，您甚至有一条到heroku.com的路径…怎样？我敢肯定，第二次接管你的配置会解决这个问题。
- 谢谢你花时间看这个。(而且说我不是一个完全的业余爱好者……有些日子感觉不是这样。)我绝对没有任何硬编码的东西，因为所有的事情都是使用项目路径完成的。我尝试了将Heroku链接为一个潜在的解决方案，但它也不起作用。
- 不过，您根本不想使用任何硬编码路径。你所说的项目路径到底是什么意思？您是否尝试放弃路径助手函数，只显式地在相对路径中写入？如果您能够让它在本地工作，那么您可以看到Herokupp实例上的情况有什么不同(IIRC是Heroku唯一控制的事情是数据库实例化)。如果您的安装程序处于相同的状态，并且在控制台中出现相同的错误，那么您在某个地方遇到了路径问题，因为您的OSX路径已将其发送到herokupp实例。
- 对。我试了两种方法，但都得到了相同的结果。如果你看下面我的"答案"，我最终放弃了所有CSS链接的图片，转而选择erb-link_to路径或html-href链接，这两个路径都传输到heroku，这是出于某种原因。
- 我刚在你的另一条评论中读到你在Dropbox文件夹中处理你的源代码？不知道是怎么回事，但这可能不是个好主意。你在Git上使用源代码管理吗？你想要在这个项目上工作，就好像它一直处于一种服务的状态。你可能会因为许多红鲱鱼在你的Dropbox环境中处于工作状态而困扰自己，但在其他地方却被破坏了。没有看到这个项目就很难猜测，但是哦，好吧。
- 我在下面的线索上回答了你。
试试这个：
1
| rake assets:precompile RAILS_ENV=production |
由于预编译只在生产模式下完成，因此无需显式指定环境。
更新：
尝试将以下行添加到GemFile：
1
2
3
4
5
6
| group :assets do
gem 'therubyracer'
gem 'sass-rails'," ~> 3.1.0"
gem 'coffee-rails',"~> 3.1.0"
gem 'uglifier'
end |
然后是bundle install。
希望能成功：)
[编辑]
在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"
- 我尝试将这些图像放入我的公用文件夹(预编译)，它会显示在本地主机版本中，但不会显示在Heroku上。
- 是否可以删除"资产路径"并只使用基本相对路径？我想知道这是否导致了一些问题——我不明白为什么Heroku甚至链接到你的Dropbox文件夹？
- 我在不同的电脑上工作，所以整个应用程序都在我的Dropbox文件夹中。不，如果没有江户记(11)，它就不会出现在希罗库。通过资产路径(在css.erb样式表中)，它给了我一个file to import not found or unreadable错误。
- 啊，这可能就是问题所在。Heroku将无法访问您的Dropbox。一种在多台计算机上工作并仍在更新同一个应用程序的方法是使用github:github.com，这是一个版本控制软件(如果你对你的应用程序的代码是公开的，那是免费的)，在这里你可以使用fork和clone目录来获取你计算机上最新的文件，包括图像。如果有许多图像，那么最好将您的图像托管在单独的服务器上。(顺便说一句，如果你已经知道了这一点，但这并不能解决你的问题，那么很抱歉！！)
- 但是在我的HTML中链接的任何图像都可以…只是CSS的。那还会是Dropbox问题吗？
- 你能举一个例子说明HTML中的图像是如何链接的吗？
- 这一次在江户十一〔1〕和希罗库没有问题：江户十一〔16〕上没有问题。
- 好吧，看来你链接到资产路径的格式应该是这样的，因为asset_path是ERB特定的助手：.class { background-image: url(<%= asset_path 'image.png' %>) }这里有更多信息
- 不幸的是，如果我把我的css.scss文件发出去，我会得到一个file not found or unreadable错误。stackoverflow.com/questions/37488785/&hellip；
- 我的错！我没意识到你在使用scss。试试这个：background:url(asset_path('someImage.jpg', image))(这是我的资料来源)
- 在本地主机上，我得到一个undefined method '[]' for"image":Sass::Script::Value::String错误。
- 我也试过了，但没用。
- 啊，很抱歉一直这样下去！我认为应该是asset-path而不是asset_path。
- 仍在使用asset-path时出错。
- 另外，如果这有帮助的话，当我试图通过heroku使用web链接(pure-gorge-23608.herokupp.com/images/bg-hero-000.jpg)查找图像时，它会显示The page you were looking for doesn't exist.。我不知道那是什么意思，但我觉得这是个线索…
- 是的-所以看起来Heroku为与资产路径/图像路径(例如pure-gorge-23608.herokupp.com/assets/&hellip；)链接的每个图像创建了一个独特的指纹。好的，一个选项是从GemFile中删除gem 'sass-rails' gem 'uglifier' gem 'coffee-rails'。似乎Rails 4的资产管道自动启用了这个"指纹"。重新安装捆绑包并使用常规的相对路径。了解Asset Pipeline/SCSS for Rails 4
- 这个链接非常有趣！我发现的一件事是，这些照片实际上是通过我的公共/资产文件夹中的指纹传到Heroku上的。(pure-garge-23608.herokupp.com/assets/&hellip；)。
- 而且这三颗宝石的移除也不走运。仍然没有背景图像。
- 我用更多的版本编辑了我原来的文章。
- 你有没有想过@liz？
好的，利兹，我解决了这个问题。如果在production模式下运行服务器，只需在config/environments/production.rb中添加该行；如果在development模式下运行服务器，只需添加config/environments/development.rb即可。
1
| config.BASE_URL = 'https://herokuapp.com/' |
然后
1
| background: url(https://herokuapp.com/assets/hero-000.jpg) no-repeat center center fixed; |
在默认情况下找不到该图像，因为herokuapp为您的应用程序创建一个子域。
试试这个：
将该映像复制到public/img文件夹，然后执行以下操作
1
| background: url(https://pure-gorge-23608.herokuapp.com/img/hero-000.jpg) no-repeat center center fixed; |
- 不幸的是，没有运气。它仍然没有出现在localhost或heroku上。我尝试了两种方法(在生产和开发中)。
- 也许你做了什么，只要点击链接，你就会得到你的图片herokupp.com/assets/stylesheet/hero-000.jpg
- 只需重新启动服务器，我想它不会被更新。你能检查页面并向我发送控制台错误吗？
- 我试图重新启动服务器，但没有成功。我也试过用在生产和开发方面都发生了变化的config.BASE_URL。我添加了我原来的帖子，包括错误的截图。
- sry liz我已经添加了一个额外的worng链接stylesheets，但现在我更新了它，检查一下。
- 尝试更新的CSS。两个平台上都没有骰子。我在本地主机和Heroku上得到一个404图像。
- herokupp.com/assets/hero-000.jpg检查此链接并确认我是否为您的图像
- 让我们在聊天中继续讨论。
如果要在样式表中使用asset_path，则需要将它们转换为erb模板。示例：application.css.erb—这使得asset_path助手在模板中可用。
然而，在大多数情况下，使用的正确方法是image-url()。只需确保以正确的方式使用它：
1
2
| 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上。
- 什么版本的Rails？另外，模板中如何包含您的样式？通过CSS导入还是从HTML中包含？
- 我使用的是Rails 4.2.5，它连接在assets/stylesheets/style.css.scss中，但我也尝试(没有用)将其放入HTML中。
- 好吧，我试着把我的style.css.scss文件转换成style.css.scss.erb，因为heroku帮助文档说你必须有erb css表才能将css资产与rails 4一起使用。现在我得到一个错误，我的css.scss.erb表中显示File to import not found or unreadable:。我觉得我们走对了，但我不知道如何克服这个错误…
- 这个问题是由文件名引起的吗？尝试style.scss.erb或style.css.erb并查看这两者中的任何一个是否给出了不同的(或没有)错误。让我知道
- 我尝试了这两种排列方式，但都没有改变错误。
我也有同样的问题，我用的是
1
| background: url("/assets/homebackground.jpg") no-repeat center center fixed; |
在我的application.css上。它在本地主机上工作，但在Heroku上没有显示任何图像。我将以下内容从假改为真：
1
2
3
4
5
6
7
8
| # config/environments/production.rb
YOURAPPLICATION::Application.configure do
# your config settings
config.assets.compile = true
# your other config settings
end |
不幸的是，在所有这些美妙的答案中，我从来没有解决过这个问题。不过，我确实找到了一个稍微有点黑客的解决方案，使用来自html.erb文档的erb链接图像，而不是.css.scss文档。
我用HTML链接图像：
1
2
3
4
| <%= image_tag 'bg-hero-000.jpg', class:"hero-image",alt:"strong man and woman lifting weights" %>
<!-- hero-image-inner -->
<!-- hero-image-inner -->
<!-- row --> |
然后使用CSS为图像创建一种类似背景的感觉：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| .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年的英雄CSS图像之谜，但它对于这个网站来说已经足够好了。感谢我所有的回答者花时间和我一起探讨这个问题。
- 根据SO，Github停止了消息传递，所以我将您添加为合作者。随便看看，我已经在使用上面提到的解决方法了。然而，我总是很想知道哪里出了问题，因为这是一个相当神秘的问题。
我看到与您的配置相关的多个问题。您发布的图片显示404错误，但是本地主机上的错误与Heroku应用程序上的不同。Heroku应用程序上的那些与CSS文件的绝对路径相关，一旦您解决了这些错误，您将能够看到Heroku上的图像。
Heroku应用程序正在引用引导文件的绝对路径。绝对路径指向本地主机上的文件。由于本地主机上存在该文件，因此在本地主机上查看应用程序时不会产生与在Heroku上查看应用程序时相同的问题。
仔细查看您发布的错误消息中的URL:https://pure-gorge-23608.herokuapp.com/users/yourname/dropbox/code/bia/app/assets/stylesheets/bootstrap.css(http://pure-gorge-23608.herokuapp.com/users/yourname/dropbox/code/bia/Failed to load resource: the server responded with a status of 404 (Not Found)
尝试在代码库中搜索绝对路径。如果您在Mac或类似的Unix环境中，ack /Users/yourname/Dropbox/Code/BIA
提示：如何在Linux上找到包含特定文本的所有文件？
找到包含对引导文件的绝对路径引用的文件时，请更改引用，使其成为相对路径而不是绝对路径。
如果您在Windows本地主机上，也可以使用文件中的find，但我在Windows中工作已经很久了。http://www.howtogeek.com/99406/how-to-search-for-text-inside-of-any-file-using-windows-search/
祝你好运，继续努力，你的网站看起来很有前途！
- 查看文件名application.scss或application.css.scss。你在你的@import中有一条绝对路径。
- 你在复制我的答案
- @乔纳森，我在应用程序中确定了绝对路径导致404个错误的具体位置，它在application.scss或application.css.scss中。我觉得我的回答更准确。
