Question

我有一个rails应用程序在开发中工作正常但无法获取从css文件加载的某些图像来加载。 html.erb上的图像加载正常。

这是我的css中的字符串：

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

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

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（删除了评论）：

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文件中查看图像？

Answer 1

我正面临类似的问题，并以这种方式帮助指出图像。

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

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

Answer 2

根据原始文件扩展名将文件扩展名更改为css.erb或scss.erb。然后你可以使用

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

Answer 3

尝试使用这样的css。

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

image-path通常用于获取资源文件夹的正确路径。您可能已将上面的演示扩展为'theme / greyscale / grayscale_main_logo ...'

Answer 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

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

4 个答案: