我在这里尝试了许多类似问题的解决方案,但迄今为止都没有。我想起初我可能需要迁移数据库或预编译资产,所以我尝试了:
rails assets:precompile
bundle exec rake assets:precompile RAILS_ENV=production
heroku run rails db:migrate
每次推送到git和heroku后,页面和导航栏的背景图像仍然没有显示。
我对这个问题也有一些怀疑,但我需要帮助调查它们。这些图像在css文件中,而不是在应用程序布局中,所以这可能是原因,但我认为application.scss中的require tree.
会自动包含所有样式表。
pages.scss:
body {
margin: 0;
padding: 0;
text-align: justify;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #F7F8ED;
background-image:url('background2.png');
background-repeat:repeat-x;
}
#menu
{
background-image:url('menu.png');
background-repeat:no-repeat;
width:720px;
height:49px;
clear:both;
}
application_layout.rb:
<!DOCTYPE html>
<html>
<head>
<title>Site1</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<h1 class="off2">Nutricion</h1>
<h2 class="off3">Simón Verde</h2>
<div id="container">
<div id="menu">
<ul>
<li class="menuitem">
<%= link_to 'Inicio', pages_inicio_path %>
</li>
<li class="menuitem">
<%= link_to 'Page1', pages_page1_path %>
</li>
<li class="menuitem">
<%= link_to 'Page2', pages_page2_path %>
</li>
<li class="menuitem">
<%= link_to 'Page3', pages_page3_path %>
</li>
<li class="menuitem">
<%= link_to 'Contacto', pages_contacto_path %>
</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
</body>
</html>
开发中的页面(图像工作)和生产(它们不起作用)的html也不同。从下面可以看出,资产似乎没有正确加载。我注意到,当我预编译资产时,它们是在public/assets
文件夹而不是app/assets
文件夹中编译的。这会有所作为吗?如果是这样,为什么要这样做,我该怎么办?还要简要解释为什么资产预编译是必要的,以便更好地理解这里出了什么问题。
我注意到的最后一点是public/assets
文件夹中的图像文件名称与app/assets
文件夹中的名称不同,即menu.png
已自动更改为menu-longlistofrandomcharacters.png
所以这可能会影响图像的显示。
来自开发的html源代码(工作图像):
<!DOCTYPE html>
<html>
<head>
<title>Site1</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="FaSScd+v4DcF0Qw1F+J4ncgTPYFVtZnGVSmbPLAbRepnLZWX5CVZ4Seu7MtM7zi9S/xvXAkX9C9S8PBaljPFag==" />
<link rel="stylesheet" media="all" href="/assets/application-6c72f0201f5f7b2ee273bd419a0b5c2a9e23f4d82d24ac305819a8f8823d7041.css" data-turbolinks-track="reload" />
<script src="/assets/application-5c96b667d84f4b133f713cdb7f070ec1c66c023d7b9a7c4da42e893764b2391e.js" data-turbolinks-track="reload"></script>
</head>
<body>
<h1 class="off2">Nutricion</h1>
<h2 class="off3">Simón Verde</h2>
<div id="container">
<div id="menu">
<ul>
<li class="menuitem">
<a href="/pages/inicio">Inicio</a>
</li>
<li class="menuitem">
<a href="/pages/page1">Page1</a>
</li>
<li class="menuitem">
<a href="/pages/page2">Page2</a>
</li>
<li class="menuitem">
<a href="/pages/page3">Page3</a>
</li>
<li class="menuitem">
<a href="/pages/contacto">Contacto</a>
</li>
</ul>
</div>
</div>
<div id="content">
<h1>Pages#inicio-</h1>
<p>Find me in app/views/pages/inicio.html.erb</p>
</div>
</body>
</html>
生产中的html源代码(非工作图像):
<!DOCTYPE html>
<html>
<head>
<title>Site1</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="GS80dnfxoO5mgrdm82ZPYZYf812BdzCUVEzCJ3bK94RMII673xzCG9UxNLxcmj/RzmuZXH/y7lWCXvP2DbaVMA==" />
<link rel="stylesheet" media="all" href="/assets/pages.self-36f0aba003234ddc45e8dc02c89942085fbc533a2591c1fef108462ef36733ce.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-5454023407ffec0d29137c7110917e1e745525ae9afbc05f52104c4cd6597429.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-b89234cf2659d7fedea75bca0b8d231ad7dfc2f3f57fcbaf5f44ed9dc384137b.js?body=1" data-turbolinks-track="reload"></script>
</head>
<body>
<h1 class="off2">Nutricion</h1>
<h2 class="off3">Simón Verde</h2>
<div id="container">
<div id="menu">
<ul>
<li class="menuitem">
<a href="/pages/inicio">Inicio</a>
</li>
<li class="menuitem">
<a href="/pages/page1">Page1</a>
</li>
<li class="menuitem">
<a href="/pages/page2">Page2</a>
</li>
<li class="menuitem">
<a href="/pages/page3">Page3</a>
</li>
<li class="menuitem">
<a href="/pages/contacto">Contacto</a>
</li>
</ul>
</div>
</div>
<div id="content">
<h1>Pages#inicio-</h1>
<p>Find me in app/views/pages/inicio.html.erb</p>
</div>
</body>
</html>
配置/ production.rb
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
# Mount Action Cable outside main process or domain
# config.action_cable.mount_path = nil
# config.action_cable.url = 'wss://example.com/cable'
# config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
config.log_level = :debug
# Prepend all log lines with the following tags.
config.log_tags = [ :request_id ]
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Use a real queuing backend for Active Job (and separate queues per environment)
# config.active_job.queue_adapter = :resque
# config.active_job.queue_name_prefix = "site1_#{Rails.env}"
config.action_mailer.perform_caching = false
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
# Use a different logger for distributed setups.
# require 'syslog/logger'
# config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')
if ENV["RAILS_LOG_TO_STDOUT"].present?
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger = ActiveSupport::TaggedLogging.new(logger)
end
# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
end
有人还可以解释为什么所有额外的html标签行都不会出现在非工作版本上吗?
答案 0 :(得分:0)
您应该将图像保存在/ assets / images中。在您的CSS中使用image-url
代替url
。这是Rails为资产管道提供的帮助程序,它将自动生成文件的正确路径。
对文件的名称更改是由于来自资产管道的附加指纹,并且资产管道将这些文件生成到/ public文件夹中,因为它是提供静态文件的根目录。在开发过程中,事情是不同的,css和js是分开提供的。我认为this会帮助您理解。
答案 1 :(得分:0)
在搜索之后我偶然发现了一个解决方案,但不知道为什么会有效。
bundle exec rake assets:precompile
工作并使图像显示。
我之前尝试过
bundle exec rake assets:precompile RAILS_ENV=production
这解决了我的问题,但我不知道命令bundle exec rake assets:precompile RAILS_ENV=production
是否也没有解决问题,因为我认为就Heroku而言,它正在做同样的事情。另一个令人困惑的事情是,html输出与原始问题中的上述内容保持一致。包括差异,即使页面看起来与包含的图像相同。
如果有人可以评论为什么这个解决方案有效,它可以改善其他人遇到同样问题的答案,也可以帮助我理解出了什么问题。