為什么在Heroku上部署的Rails應用程序中未顯示圖像？
[英]Why are images not showing in Rails app deployed on Heroku?
問題描述
我已經在這里針對類似問題嘗試了許多解決方案，但到目前為止都沒有成功。 我認為起初我可能需要遷移數據庫或預編譯資產，所以我嘗試了：
rails assets:precompile
bundle exec rake assets:precompile RAILS_ENV=production
heroku run rails db:migrate
每次我推到git和heroku后，頁面和導航欄的背景圖像仍然不顯示。
對於這個問題，我也有一些懷疑，但是我需要調查它們的幫助。 圖像在css文件中，而不在應用程序布局中，因此這可能是原因，但是我認為這require tree. 在application.scss中將自動包含所有樣式表。
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標簽行都不會出現在非工作版本中嗎？
2 個解決方案
解決方案1
0 2018-04-13 14:10:56
您應該將圖像保存在/ assets / images中。 並在您的CSS中使用image-url而不是url 。 這是Rails為資產管道提供的幫助程序，它將自動生成文件的正確路徑。
文件名稱的更改是由於資產管道中添加了指紋，資產管道將這些文件生成到/ public文件夾中，因為這是提供靜態文件的根目錄。 在開發中，情況有所不同，css和js分別提供。 我認為這將幫助您理解。
解決方案2
0 已采納 2018-04-16 08:52:53
搜索后，我偶然發現了一個解決方案，但不知道為什么有效。
bundle exec rake assets:precompile有效並顯示了圖像。
我以前嘗試過
bundle exec rake assets:precompile RAILS_ENV=production
這解決了我的問題，但是我對命令bundle exec rake assets:precompile RAILS_ENV=production是否也不能解決問題感到bundle exec rake assets:precompile RAILS_ENV=production ，因為我認為就Heroku而言，它正在做相同的事情。 另一個令人困惑的事情是，html輸出與上面在原始問題中所述的相同。 即使頁面看起來與所包含的圖像相同，也包括差異。
如果有人可以評論為什么該解決方案有效，那么它可以改善其他人遇到相同問題的答案，也可以幫助我了解問題出在哪里。
Ruby on Rails應用程序已部署到heroku，但是應用程序出錯？
[英]Ruby on Rails app deployed to heroku but Application error?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.