为什么在Heroku上部署的Rails应用程序中没有显示图像？

时间：2018-04-13 13:56:06

标签： ruby-on-rails heroku

我在这里尝试了许多类似问题的解决方案，但迄今为止都没有。我想起初我可能需要迁移数据库或预编译资产，所以我尝试了：

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标签行都不会出现在非工作版本上吗？

2 个答案:

答案 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输出与原始问题中的上述内容保持一致。包括差异，即使页面看起来与包含的图像相同。

如果有人可以评论为什么这个解决方案有效，它可以改善其他人遇到同样问题的答案，也可以帮助我理解出了什么问题。

相关问题
最新问题