herokuデプロイ 背景画像表示させる

記事投稿の理由

初めてherokuでデプロイした際に画像が表示されなくて苦しんだので
復習兼ねて記事書かせていただきます。
環境によって違う場合もある。参考程度にみてくださると幸いです。

今回のテーマと環境

rails 5.0.7.2

herokuでデプロイはできていて
画像のみが表示されないと仮定します。

変更箇所

assetファイルは事前にコンパイルしておきます。
しかしassetファイルが見つから無い場合にtrueにしておくとサーバー側でコンパイルしてくれるそうです。
ただし、コンパイルによりサーバー側の負荷も上がるのでここは環境によって変わると思います。

今回私の場合はconfig.assets.compile = falseのところをtrueに変更して対応しました。

production.rb

# Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

config.assets.css_compressor = :sassのコメントアウトを外して
私の場合scssファイルで色付けなど行なっていたため
config.assets.css_compressor = :scssに変更

production.rb

# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :scss

背景画の設定しているところを
background-image: url("china.jpg");から下記に変更

index.scss

.contact{
  background-image: image-url("china.jpg");

asset_pathの追加
＜img src="freemarket.png" alt="制作事例１" width=500px height=280px＞を下記に変更

index.html.erb

<li class="portfolio">
        <a href="http://18.177.66.99/" class="portfolio-image">
          <img src="<%= asset_path "freemarket.png" %>" alt="制作事例１" width=500px height=280px >
        </a>
      </li>

あとherokuにファイル送付する前に開発環境のコンソールにて下記忘れないように。。

$ rake assets:precompile RAILS_ENV=production

最後に

僕はこのような方法でデプロイした際にうまく画像が表示されるようになりました。
環境によっても違うと思いますが参考になれば・・・・

参考にさしていただいたサイト

Rails4 asset pipeline関連設定まとめ
Rails4ではbackground:url("assets/hoge.png")の書き方は動かない話
Rails初学者がつまずきやすい「アセットパイプライン」
HerokuにRubyのデータをデプロイ後、画像が見れない