RoR - アプリケーションの実行中にCSSから画像がロードされない

Question

開発には問題ないが、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

このようなCSSを試してみてください。

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

通常、画像パスはアセットフォルダへの正しいパスを取得するために使用されます。上記のデモを 'theme/greyscale/grayscale_main_logo ...'に拡張している可能性があります。

Answer 2

アセットパイプラインはアセットファイル名のダイジェストを使用して本番環境のアセットを参照するためです。この使用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

Answer 3

参照すると、このように助けた画像を指し示すために働くだろう。

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

このようにアセットパイプラインはassets/images/theme/grescaleフォルダの画像を検索しようとします。

Answer 4

元のファイル拡張子に応じて、ファイル拡張子をcss.erbまたはscss.erbに変更します。その後、あなたは使用することができます

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