Rails 4 背景图片 - 纯 CSS

Question

我创建了一个简单的应用程序，我的 application.css 文件中有这个：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */
html {
    background-image: url(/assets/homepage_bg_1.jpg);
}

现在我正在使用 webrick，在开发模式下它工作正常。现在问题出现在生产模式下，壁纸不显示。

我跑了：

rake assets:precompile 
rails -s -e production

图像不会显示出来。

我已经尝试过background-image: url(/assets/images/homepage_bg_1.jpg); 等等，但没有。

这是我的生产环境文件：

Properties::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 thread 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

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = false

  # 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

  # Generate digests for assets URLs.
  config.assets.digest = true

  # Version of your assets, change this if you want to expire all your assets.
  config.assets.version = '1.0'

  # 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

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Set to :debug to see everything in the log.
  config.log_level = :info

  # Prepend all log lines with the following tags.
  # config.log_tags = [ :subdomain, :uuid ]

  # Use a different logger for distributed setups.
  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = "http://assets.example.com"

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
  # config.assets.precompile += %w( search.js )

  # 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 can not be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Disable automatic flushing of the log to improve performance.
  # config.autoflush_log = false

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new
end

是 CSS 坏了还是 Rails 4 中的什么东西？

Answer 1

几天前我遇到了同样的问题，我也在问自己为什么。没有问题，但是 Rails 改变了编译资源图像的方式。

这是我的解决方案：

首先确保您没有忘记在生产环境中编译资产：

RAILS_ENV=production bundle exec rake assets:precompile

查看您的public/assets 文件夹，您会注意到编译后的图像名称如下：

homepage_bg_1-12cf3e4fe243f4296a4b23b952497814.jpg

Rails 对资产进行了版本化，我假设缓存图像并优化服务器和客户端之间的响应时间。

我的解决方案的下一步是在您的 css 代码中使用 asset_path("homepage_bg_1.jgg", image) 帮助程序，这就是为什么您需要重命名您的 custom.css 文件到 custom.css.scss，之后您的 css 代码将如下所示：

.my_class{ background-image: url(asset_path("homepage_bg_1.jpg", image)); }

此外，您还需要在 html 的 erb/haml 视图中使用 image_path 和 image_tag 或直接在 html 的图像标签中使用：

image_tag(image("logo.png")) 或 <image src="<%= image_path(logo.png'') %>" \>

您可以在此处阅读有关此助手和其他助手的更多信息： http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-asset_path