Rails 4-背景图像出现在Localhost中,但未出现在生产环境中

帕梅拉·库克(Pamela Cook)-LightBe Corp

我最近重写了我的Rails 3.2.13应用程序之一以使用Rails4。我在Rails 3应用程序中使用了twitter-bootstrap-rails 2.1.2。当我重写Rails 4版本时,它开始使用版本2.2.8。我在开发和生产服务器上使用Phusion Passenger 4.0.20托管所有Rails应用程序。

在我的Rails 3应用程序中,背景图像在localhost和生产环境中正确显示。但是,当我使用Rails 4和当前版本的twitter-bootstrap-rails重新编写应用程序时,我注意到背景图像正确显示,但是当我将其部署到生产环境中时,背景图像不会显示。

我尝试了以下CSS,但背景图片仅出现在localhost中。第一条语句是原始CSS代码,该代码在localhost和生产环境中的Rails 3应用程序中均能正常工作。

background: url(/assets/landingpage2.jpg); width: 574px; height: 650px;

background: url(../assets/landingpage2.jpg); width: 574px; height: 650px;

background-image: url(../assets/landingpage2.jpg); width: 574px; height: 650px;

background-image: url("../assets/landingpage2.jpg"); width: 574px; height: 650px;

background-image: url("/assets/landingpage2.jpg"); width: 574px; height: 650px;

这是包含最初起作用的背景语句的类:

.landing-cube-menu {
  font-weight: bold; 
  font-size: 150%;
  line-height: 100%;    
  background: url(/assets/landingpage2.jpg); width: 574px; height: 650px;
  margin:0 auto;  
}

这是我在视图中使用的代码:

<div class="header-cube-menu" style="position: relative;">

  <div class="header-store" style="position: absolute;">
    <p><%= link_to "Online Store", store_path %></p>
  </div>

  <div class="header-about" style="position: absolute;">
    <p><%= link_to "About", about_path %></p>
  </div>

  <div class="header-contact" style="position: absolute;">
    <p><%= link_to "Contact", contact_path %></p>
  </div>

  <div class="header-verse" style="position: absolute;">
    <p><a href="/verse">Bible<br>Verse</a></p>
  </div>

  <div class="header-app" style="position: absolute;">
    <p><a href="/app">Mobile<br>&nbsp;&nbsp;App</a></p>
  </div>

  <div class="header-home" style="position: absolute;">
    <p><a href="/home">Home<br>&nbsp;Page</a></p>
  </div>

  <div class="header-math" style="position: absolute;">
    <p><a href="/math">The<br>Math</a></p>
  </div>

  <div class="header-vision" style="position: absolute;">
    <p><a href="/vision">&nbsp;Vision<br>Mission</a></p>
  </div>

  <div class="header-pendant" style="position: absolute;">
    <p><a href="/pendant">Pendant<br>&nbsp;&nbsp;&nbsp;Desk Cross<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and more</a></p>
  </div>

  <div class="header-puzzle" style="position: absolute;">
    <p><a href="/puzzle">3D-Puzzle<br>&nbsp;&nbsp;eBook</a></p>
  </div>

</div>

我已经在浏览器中清除了本地主机和域的缓存。我仍然在本地主机中看到该映像,但是在域中却看不到。我尝试在Mac Mini Server上使用最新版本的Safari,Chrome,Firefox和Opera。他们都得到相同的结果。

如果我没有在localhost中看到背景图像,我可以理解这一点。我使用本地主机对Rails 4应用程序进行了测试,并假定它可以在生产环境中工作。但是,在我部署它之后,背景图像丢失了。这在我的生产和开发服务器上都在发生。图像文件位于两台服务器上的app / assets / images中。

我的原始代码和此处发布的所有示例都是正确的,因为该图像显示在localhost中。我目前不知道在哪里检查。我可以将其发布在Google乘客网上论坛中。那是本地主机和生产之间的唯一其他变量,特别是考虑到我的开发服务器。

更新:发布此文章后,我决定尝试其他可能性。现在,背景图像不再显示给localhost。我对此完全感到沮丧。

任何帮助,将不胜感激。

UPDATE 10/19/2013 8:05 PM CDT GMT-5

我试图在.less文件中实现asset_url解决方案。这是我执行rake资产时遇到的错误:precompile RAILS_ENV = production命令

I, [2013-10-19T19:59:05.384878 #69440]  INFO -- : Writing /Users/myusername/Sites/myrailsapp/public/assets/application-f8821f5601f793a09e9373fb397df1b1.js
    rake aborted!
    undefined method `[]' for nil:NilClass
      (in /Users/myusername/Sites/hypercubeoflove_RoR_4/app/assets/stylesheets/application.css)
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/sass_functions.rb:63:in `sprockets_context'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-rails-4.0.0/lib/sass/rails/helpers.rb:23:in `asset_url'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/script/funcall.rb:112:in `_perform'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/script/node.rb:40:in `perform'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `map'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `map'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:7:in `visit'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/tree/root_node.rb:20:in `render'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/engine.rb:315:in `_render'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sass-3.2.12/lib/sass/engine.rb:262:in `render'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/sass_compressor.rb:24:in `evaluate'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/context.rb:197:in `block in evaluate'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `each'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `evaluate'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/bundled_asset.rb:25:in `initialize'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `new'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `build_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/index.rb:94:in `block in build_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/caching.rb:58:in `cache_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/index.rb:93:in `build_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/base.rb:287:in `find_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/index.rb:61:in `find_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:211:in `block in find_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:257:in `benchmark'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:210:in `find_asset'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:119:in `block in compile'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `each'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `compile'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:60:in `block (3 levels) in define'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-2.10.0/lib/rake/sprocketstask.rb:146:in `with_logger'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:59:in `block (2 levels) in define'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/bin/ruby_noexec_wrapper:14:in `eval'
    /Users/myusername/.rvm/gems/ruby-2.0.0-p247@mygemset/bin/ruby_noexec_wrapper:14:in `<main>'
    Tasks: TOP => assets:precompile
    (See full trace by running task with --trace)
理查德·派克(Richard Peck)

您的问题几乎可以肯定rake assets:precompile与您的生产环境有关

一个很好的测试将是Right-Click > View Source在您的生产应用程序上,然后单击调用背景图像的CSS文件。如果您的问题是CSS调用了url(“ background-image.png”),则当您单击该文件时,它没有显示,解决方案是使用SCSS动态地预编译资产


使用SCSS预编译资产

我们遇到了无法访问CSS中的图像文件的问题,发现这是因为CSS仅引用静态url()位置;在预编译中,我们的应用程序将图像称为“ backgroun-image-234234nsdfasfdjasdfk2jij234ij32i.png”

解决该问题的方法是使用SCSS创建到资产的动态链接;允许您的应用为图像等放置正确的路径。这是一些实时代码:

#application.css.scss (yes, you need to rename it)
@import 'layout/body'


#app/assets/stylesheets/layout/body.css.scss
body {
    background: asset_url('background-image.png')
}

如果执行此操作,然后在推向生产环境时,执行以下命令,则该命令应该起作用:

rake assets:precompile RAILS_ENV=production

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我的log4j消息没有出现在日志文件中?

背景图像未出现在<span>元素中

s4s-att-not-allowed:属性'xs:type'不能出现在元素'element'中

Rails:收集其联接表出现在两个查询中的记录

Sidekiq作业不断出现在Rails应用程序中

背景图像未出现在XCODE 12中

雪碧套件。SKSpriteNode未出现在iPhone 4上,但出现在4S上

通过UIButton的UIImageView不会出现在iPhone 4中

Laravel 4自定义软件包未出现在autoload_namespace.php中

整页谷歌地图后面的背景图像未出现在html输出中

吐司通知没有出现在MVC 4中

USB闪存驱动器未出现在Samsung NP900X4D UEFI“启动菜单”中

Rails 4 + Sass-生产中无背景图像

渲染JSON没有出现在Rails 4的视图中

图像未出现在PFQueryCollectionViewController中

Rails 4:图像路径在生产环境中不起作用

图像未出现在JFrame中

形式不提交错误出现在MVC 4中的参数为空条目

我希望我的轮播仅在Rails应用程序中出现在索引页面中

Bootsrap 模式未出现在 Rails 应用程序中

使用回形针通过我的 rails-app 上传的一些图像未出现在 heroku 上

Rails - json - 密码出现在 json 响应中,但已定义

Rails/BootStrap - 使迭代对象数据出现在列中

大纲不会出现在 Bootstrap 4 的 btn-group 按钮中

属性“amp4ads”可能不会出现在标签“html”中

数据填充Datagrid,但未出现在WPF中

TinyMCE HTMLField 和 Django TextField 没有出现在生产环境中

背景图像未出现在表格单元格中

背景图像出现在表单输入中