railsでcssに書いたpathはapplication.css内で解釈される

rails 技術

imageが表示されなかった

css内で

.example {
    background-image: image-url("hogehoge.png")
}

とか書いていたら本番環境で画像が表示されなかった

assetsの配信方法

ディレクトリ構成は↓みたいな感じ

sample-app
    app
        assets
            stylesheet
                application.css
    .
    .
    .
    public
        hogehoge.png

デプロイ時にはapp/assets配下を圧縮してCDNサーバーに配置してた

cssに書いたpathはapplication.css内で解釈される

imageが表示されなかった理由は

  • application.css無いでimage-urlが解釈される
  • application.cssのあるサーバーの/hogehoge.pngを探しに行く
  • 実際にはwebサーバーのpublic/hogehoge.pngに配置してあるので見つからない

のでうまくいっていなかった

解決方法としては

  • assets/にimageを置く => railsはassetファイルにhashをつけるのでjsからは読めない、rails内でimage-urlを使えば解決できる
  • 絶対パスで指定する
  • publicをCDNサーバーに配置する

とかがありそう、3つ目が良さそう