RoR - 运行应用程序的生产无法从 CSS 加载图像答案

【问题标题】：RoR - Running Production of Application fails to load images from CSSRoR - 运行应用程序的生产无法从 CSS 加载图像
【发布时间】：2016-05-01 05:37:19
【问题描述】：

我有一个在开发中运行良好的 Rails 应用程序，但无法获取从 css 文件加载的某些图像以进行加载。 html.erb 上的图片可以正常加载。

这是我的 css 中的字符串：

.greyscale .banner-logo {
    background: url(/assets/theme/greyscale/greyscale_main_logo.png) no-repeat center center;
}

这是我的 production.rb（删除了 cmets）：

Rails.application.configure do
  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.assets.js_compressor = :uglifier
  config.assets.compile = false
  config.assets.digest = true
  config.log_level = :debug
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new
  config.active_record.dump_schema_after_migration = false
end

这是我的 development.rb（删除了 cmets）：

Rails.application.configure do
  config.cache_classes = false
  config.eager_load = false
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false
  config.action_mailer.raise_delivery_errors = false
  config.active_support.deprecation = :log
  config.active_record.migration_error = :page_load
  config.assets.debug = true
  config.assets.digest = true
  config.assets.raise_runtime_errors = true
end

这是我的 assets.rb：

Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]

我需要在 production.rb 中添加/修改什么以允许我查看 css 文件中的图像？

【问题讨论】：

预编译过程中有什么错误吗？浏览器控制台抛出了什么？

标签： css ruby-on-rails ruby

【解决方案1】：

我遇到了类似的问题，以这种方式指向图像有帮助。

.greyscale .banner-logo {
    background-image: image-url("theme/greyscale/greyscale_main_logo.png") no-repeat center center;
}

这样资产管道将尝试在assets/images/theme/grescale 文件夹中查找图像。

【讨论】：

【解决方案2】：

将文件扩展名更改为css.erb 或scss.erb，具体取决于您的原始文件扩展名。然后就可以使用了

background: url("<%= asset_path 'theme/greyscale/greyscale_main_logo.png') %>" no-repeat center center;

【讨论】：

【解决方案3】：

在你的 css 中尝试这样的东西。

url(image-path('greyscale_main_logo.png'))

image-path 通常用于获取 assets 文件夹的正确路径。您可能已将上面的演示扩展为“主题/灰度/灰度主徽标...”

【讨论】：

【解决方案4】：

这是因为资产管道使用资产文件名中的摘要来引用生产中的资产。要解决此问题，请使用 asset-path 或 image-path：

.greyscale .banner-logo {
    background: url(image-path('theme/greyscale/greyscale_main_logo.png')) no-repeat center center;
}

这适用于引用app/assets/images/greyscale/greyscale_main_logo.png

【讨论】：