【Rails】ビューに画像を表示する方法

初投稿です。
至らぬ点もあるかと思いますので暖かい目で見守っていただけると幸いです・・・

Railsで画像を表示する方法にかなり手こずったのでメモとしての記録です。
それでは早速参りましょう！

※haml・scssで記述しています。

画像を表示する方法

まずは、スタンダードに画像を表示する方法。 haml・scssどちらに書いても表示されるみたいです。 どっちに書くのが正解なのと思うところです。

個人的な印象としては画像を背景として使いたい時、
例えば画像の上にテキスト情報表示したい時とか。
そんなときは、background-imageとしてscssに記述したほうが良さげ。
ここの違いよくわからないので違いがわかる方いたらご教授いただきたいです

まず、表示する画像がないといけません。
app/assets/images
こちらのディレクトリーに表示したい画像を格納して準備完了です。

hamlに記述する場合

ファイル名.html.haml

= image_tag ("画像名.jpg")

これじゃまだ表示できないんですよね。
widthとheightを設定してあげないと表示されません。
そんな時は、scssに画像を整える記述を書く必要があります。

_ファイル名.scss

        img {
          width: 100%;
          height: 100%;
        }

こんな感じで、width: 100%;とheight: 100%;を指定すると無事表示されます。
今回の場合は「％」ですが「px」でも可能！
hamlで書く時は”= image_tag”これが必須ですね。

scssに記述する場合

```_ファイル名.scss .クラス名 { height: 560px; width: 100%; background-image: image-url("ファイル名.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; } ``` こんな感じで書くと表示できます。 background-sizeとかその辺のプロパティ書かないと、 画像が「ばぁぁぁぁあぁぁん」ってなります。（悲惨） あとは、widthとheightの設定も必要です。 実装したいイメージにあったプロパティを選択する必要があります。

本番環境でのみ画像が表示されない

ローカル環境で表示されるのに、本番環境で表示されない・・・ なんてこともあります。

表示できないときのコードがこちら

_ファイル名.scss

.クラス名 {
  height: 560px;
  width: 100%;
  background-image: url("ファイル名.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

上のコードと見比べて違うところは

_ファイル名.scss

.クラス名 {
  background-image: url("ファイル名.jpg");
}

この部分です。
この書き方だと、ローカルでは表示できるけど、本番では表示されません。

_ファイル名.scss

.クラス名 {
  background-image: image-url("ファイル名.jpg");
}

このように修正することでで本番でもローカルでも表示できるようになります。

データベースにある画像を表示する方法

例えば、商品を登録するときに画像も登録することがあります。 登録した画像を表示したい！！そんな時の方法です。

◇条件1◇画像は別テーブルで保存する場合

別テーブルで保存する理由は、複数枚画像を登録するためです。 一枚だけ登録する場合は、テーブルを分ける必要はないかと思います。

コントローラー名.rb

  def index
    @items = Item.includes(:item_images).order("created_at DESC").limit(5)
  end

こんな感じで情報を取得。
item_imagesは画像を保存している箇所です。

ファイル名.html.haml

- @items.each do |item| #eachで展開
　= image_tag item.item_images[0].image.url

_ファイル名.scss

        img {
          width: 100%;
          height: 100%;
        }

このように書くと表示できました。
正直、めっちゃ記述長い・・・そんな印象
[0]→画像は配列で格納されているみたいで何枚目かの指定をする必要があります。

◇条件2◇画像は別テーブルで保存しない場合

html.erbの記載となります。

コントローラー名.rb

  def index
    @items = Item.order("created_at DESC").page(params[:page]).per(5)
  end

こんな感じで情報を取得。

ファイル名.html.erb

<% @items.each do |item| %>
　<%= image_tag item.image.to_s, :size =>'220x220'%>

ちゃっかり、ファイル名.html.erb内でサイズ指定しちゃっています。
これで表示できました

他に、表示する方法あればご教授いただきたいです