5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-04

##記事投稿の理由
初めて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="制作事例1" 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="制作事例1" 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のデータをデプロイ後、画像が見れない

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?