##事象
ローカル開発環境では表示されていたビューの背景画像が、本番環境(Heroku)では表示されない。
それ以外は、正常にデプロイできている。
% git push memo-space master
...
remote: Done: 88.5M
remote: -----> Launching...
remote: Released v12
remote: https://memo-space.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/memo-space.git
c05fd9d..8919aad master -> master
→ 背景画像が表示されない
背景画像以外は正常にデプロイされている。
####前提条件
背景画像の読み込みをscssファイルで記載している。
試したこと
画像ファイルを読み込んでいるscssファイルを確認
app/assets/stylesheets/modules/_contents.scss
&__contents {
@import "mixin/mixin";
@import "contents_left";
@import "contents_center";
@import "contents_right";
@import "contents_index";
background-image: image-url("beach.jpg");
// background-image: image-path("beach.jpg");
// background-image: asset_path("/images/beach.jpg");
background-size: cover;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: calc(100vh - 80px);
display: flex;
}
いろいろ試してみる
画像イメージの読み込むメソッドを変えてデプロイし直してみる
background-image: image-path("beach.jpg");
→ 変化なし
画像イメージの読み込むときのパス指定を変えてみる
background-image: asset_path("/images/beach.jpg");
→ 変化なし
Herokuのデプロイ手順をやり直したり
ハマること2時間
.gitignoreファイルを眺める
原因
背景画像を置くディレクトリが、.gitignoreにデプロイ対象外として記載されていたことでした。