Rails開発でBootstrapのJambotronを使って、画像を配置したとき、開発環境では問題なく表示されましたが、Herokuで本番環境にpushして、確認をしてみると、うまく表示されていなかったので、そんな時の対処方法をメモいたします。
対処前の状態
views
|
1 2 3 4 5 6 |
<div class="jumbotron"> <div class="container"> <h1>Hello Jumbotron!</h1> <p>Thanks to wacthing our website!</p> </div> </div> |
画像はapp/assets/images/配下に置いています。
css
|
1 2 3 4 5 6 |
.jumbotron { padding-top: 0px; background: url(hoge.jpg); background-size: cover; background-position: 50% 50%; } |
これで、開発環境では画像が表示されていました。
本番ではエラー
しかし、本番でも確認しようとHerokuにpushして、ブラウザを見てみると、画像が表示されていなかったので、$ heroku logs -tコマンドでログを確認してみると、、、
|
1 2 3 4 5 6 7 |
2018-10-13T01:10:13.141766+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] Started GET "/assets/hoge.jpg" for 106.161.179.190 at 2018-10-13 01:10:13 +0000 2018-10-13T01:10:13.142821+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] 2018-10-13T01:10:13.142893+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] ActionController::RoutingError (No route matches [GET] "/assets/hoge.jpg"): 2018-10-13T01:10:13.142956+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] 2018-10-13T01:10:13.143059+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call' 2018-10-13T01:10:13.143061+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/show_exceptions.rb:33:in `call' 2018-10-13T01:10:13.143063+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/railties-5.2.1/lib/rails/rack/logger.rb:38:in `call_app' |
RoutingErrorが出ていました！
対処方法
image_urlというRailsメソッドで呼び出してやることで、本番環境でも、問題なく表示されるようになりました！
css
|
1 2 |
//background: url(hoge.jpg); background: image-url("hoge.jpg"); |
ログにもエラーは出なくなりました。
|
1 2 |
2018-10-13T01:16:42.339096+00:00 heroku[router]: at=info method=GET path="/assets/application-41a8a0c910d146b52xxxxxxx91dd1b216f549ebdfaxxxxxxx.css" host=myapp.herokuapp.com request_id=404a0a4c-58ed-4a27-a93a-cef5e4e70829 fwd="106.161.179.190" dyno=web.1 connect=1ms service=1ms status=304 bytes=48 protocol=https 2018-10-13T01:16:42.687836+00:00 heroku[router]: at=info method=GET path="/assets/hoge-399a267db9e5c9efaf01f2903e71700274sssssccccsszzz050fe4c18df8973982d5ef58.jpg" host=myapp.herokuapp.com request_id=7c0334fe-d7d8-4055-8ba6-b7070c83bc80 fwd="106.161.179.190" dyno=web.1 connect=1ms service=2ms status=304 bytes=48 protocol=https |
その他の解決方法としては、app/assetsではなくて、public/assetsに画像を配置するという方法があります。ですが、これではRailsの推進するAssetPipelineが適用されません。よって、AssetPipelineの仕組みを使って、よりブラウザからの読み込み速度を上げるためにはapp/assets/images ディレクトリに画像を置くことが良いと言えます。
以上です！
どなたかのお役に立てば幸いです！！
