ActionController::RoutingError (No route matches [GET] "/images/bx_loader.gif"): の対処法
Ruby on RailsでjQueryプラグインを利用している時に下記のようなエラーが出ることがあります。
ActionController::RoutingError (No route matches [GET] "/assets/app/assets/images/bx_loader.gif"): actionpack (5.0.6) lib/action_dispatch/middleware/debug_exceptions.rb:53:in `call' web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app' web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call' web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch' web-console (3.5.1) lib/web_console/middleware.rb:18:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call' railties (5.0.6) lib/rails/rack/logger.rb:36:in `call_app' railties (5.0.6) lib/rails/rack/logger.rb:24:in `block in call' activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `block in tagged' activesupport (5.0.6) lib/active_support/tagged_logging.rb:26:in `tagged' activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `tagged' railties (5.0.6) lib/rails/rack/logger.rb:24:in `call' sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call' activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence' activesupport (5.0.6) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast' activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence' activesupport (5.0.6) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast' sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/request_id.rb:24:in `call' rack (2.0.3) lib/rack/method_override.rb:22:in `call' rack (2.0.3) lib/rack/runtime.rb:22:in `call' activesupport (5.0.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/executor.rb:12:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/static.rb:136:in `call' rack (2.0.3) lib/rack/sendfile.rb:111:in `call' railties (5.0.6) lib/rails/engine.rb:522:in `call' puma (3.10.0) lib/puma/configuration.rb:225:in `call' puma (3.10.0) lib/puma/server.rb:605:in `handle_request' puma (3.10.0) lib/puma/server.rb:437:in `process_client' puma (3.10.0) lib/puma/server.rb:301:in `block in run' puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread' ActionController::RoutingError (No route matches [GET] "/assets/app/assets/images/controls.png"): actionpack (5.0.6) lib/action_dispatch/middleware/debug_exceptions.rb:53:in `call' web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app' web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call' web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch' web-console (3.5.1) lib/web_console/middleware.rb:18:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call' railties (5.0.6) lib/rails/rack/logger.rb:36:in `call_app' railties (5.0.6) lib/rails/rack/logger.rb:24:in `block in call' activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `block in tagged' activesupport (5.0.6) lib/active_support/tagged_logging.rb:26:in `tagged' activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `tagged' railties (5.0.6) lib/rails/rack/logger.rb:24:in `call' sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call' activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence' activesupport (5.0.6) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast' activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence' activesupport (5.0.6) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast' sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/request_id.rb:24:in `call' rack (2.0.3) lib/rack/method_override.rb:22:in `call' rack (2.0.3) lib/rack/runtime.rb:22:in `call' activesupport (5.0.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/executor.rb:12:in `call' actionpack (5.0.6) lib/action_dispatch/middleware/static.rb:136:in `call' rack (2.0.3) lib/rack/sendfile.rb:111:in `call' railties (5.0.6) lib/rails/engine.rb:522:in `call' puma (3.10.0) lib/puma/configuration.rb:225:in `call' puma (3.10.0) lib/puma/server.rb:605:in `handle_request' puma (3.10.0) lib/puma/server.rb:437:in `process_client' puma (3.10.0) lib/puma/server.rb:301:in `block in run' puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'
上記のエラーが出たときの対処法がなかったので、残しておきます。
jquery.bxslider.scssの設定を変更
実は上記のエラーはRails4以前だと出現しませんでした。 Rails4以降のscssの記法が変更になったため、Rails自体が画像を読み込まないという状態です。
bxslider付属のcontrols.pngとbx_loader.gifをapp/assets/imagesに入れたら下記の部分の記述を変更します。
変更前
/* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url ('images/bx_loader.gif') center center no-repeat #ffffff;; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }
変更後
/* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background-image: image-url('bx_loader.gif') center center no-repeat #ffffff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }
変更前
/* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url('images/controls.png') no-repeat 0 -32px; } .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus { background-position: 0 0; } .bx-wrapper .bx-next { right: 10px; background: url('images/controls.png') no-repeat -43px -32px; }
変更後
/* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background-image: image-url('controls.png') no-repeat 0 -32px; } .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus { background-position: 0 0; } .bx-wrapper .bx-next { right: 10px; background-image: image-url('controls.png') no-repeat -43px -32px; }
変更前
.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url('images/controls.png') -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url('images/controls.png') -86px -44px no-repeat; margin: 0 3px; }
変更後
.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background-image: image-url('controls.png') -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background-image: image-url('controls.png') -86px -44px no-repeat; margin: 0 3px; }
bxsliderのデフォルトbackground-imageの変更
Rails4以前はbackgroundでよかったのが、Rails4やRails5ではbackground-imageにしなくてはいけない決まりとなっていたようです。 とにかく、bxsliderをそのまま使うと謎のエラーが出るので気をつけてください。