【Rails】image_tagの使い方を徹底解説!

Rails

image_tagとは

railsで画像を表示するためのimgタグを作成するヘルパーメソッドです。
image_tagを使うことにより、簡単にimgタグを作成することができます。

image_tagの使い方
リンクをコピーしました

image_tagを使用する時には下記のように記述します。

erb
1
<%= image_tag 'ファイル名', 'オプション' %>

classの指定
リンクをコピーしました

オプションにはclassなどを指定できます。

erb
1
<%= image_tag 'test.jpg', class: 'hoge' %>

このように記述すると下記のコードにコンパイルされます。

html
1
<img src="/assets/test.jpg" class="hoge">

画像ファイルの置き場所
リンクをコピーしました

表示するファイルの置き場所は「app/assets/images」フォルダと「public」フォルダの2つが用意されています。

上のように指定すると「app/assets/images」フォルダに入っている画像が参照されます。
「public」フォルダに入っている画像を参照したい場合は下記のようにファイル名の前に「/」をいれましょう。

erb
1
<%= image_tag '/test.jpg' %>

画像のサイズの指定
リンクをコピーしました

また画像のサイズも指定できます。

erb
1
<%= image_tage 'test.jpg', size: '100x200' %>

左が幅で右が高さです。
このとき「x」はアルファベットの「X」の小文字なので注意しましょう。

代償テキストの指定
リンクをコピーしました

画像が表示されない時の代償テキストも指定できます。

erb
1
<%= image_tage 'test.jpg', alt: 'テスト画像' %>

実際のアプリでimage_tagを使ってみよう
リンクをコピーしました

それでは実際にアプリの中でページネーションを実装してみましょう。
下記のコマンドを一つずつ実行していきましょう。
①git clone -b image_tag https://github.com/miyagit/programan_dojo.git

② cd programan_dojo

③ bundle install
→ rbenv: version ‘2.4.1’ is not installed と表示された場合は、ruby -v と実行してください。

ruby -vと実行し出てきたversion(例: 2.3.1)と出てきたら、

vim .ruby-versionとし、
ruby -vで出てきた値(例: 2.3.1)に書き換えてください。

続いてvim Gemfileとし、ruby 2.4.1と書いてある部分をruby -vで出てきた値(例: 2.3.1)に書き換えてください。

④ rails db:create && rails db:migrate && rails db:seed

環境構築が完了しました。と表示されると、
本当にrails applicationが動作するかrails sコマンドで起動しましょう。

rails sを起動し、ブラウザでlocalhost: 3000と入力して下記のような画面が出てくれば環境構築完了です!

環境構築

画像を表示させてみよう
リンクをコピーしました

それではimage_tagを使い画像を表示させてみましょう。
「app/views/main/top.html.erb」を下記のように編集してください。

erb
1
2
3
4
  <div class='p-top'>
      <p class='p-top__title'>今回の記事の目標:<%= @title %></p>
       <%= image_tag "ramen.jpeg" %>
  </div>

さて表示させる画像はどこに設置すればよかったでしょう?
そうですね、「app/assets/images」でしたね。
その場所に適当な画像を保存し、その画像ファイル名をimage_tag内に記述しましょう。
それでは実際に表示されるか確認してみましょう。

image_tag

このように画像が表示されました。
もし左に空白が空いていたらコードの中のインデントが空白文字として入っているためです。

ただ今回の画像が大きすぎるため、かなりバランスが悪いですね。
こちらのサイズを調整して表示させてみましょう。

erb
1
<%= image_tag "ramen.jpeg", size: "300x250" %>

これで画像のサイズが幅300、高さ200に設定されました。

サイズの設定

このように縮小されて表示されました。
次は画像が表示されなかった場合の代償テキストを設定してみましょう。

erb
1
<%= image_tag "ramen.jpeg", size: "300x250", alt: "ラーメン" %>

これで何らかの事情で画像が表示されなかった場合、画像の代わりに「ラーメン」と表示されます。
コンパイルされると下記のコードになっています。

html
1
<img alt="ラーメン" src="/assets/ramen-b561f56a99e7fb44ca693afa3559aa327a29baf408129b37b0ccd1a24f06ddeb.jpg" width="300" height="250" />

このようにalt属性がちゃんとセットされているのが確認できます。

まとめ

image_tagは簡単に画像を表示させるタグを作成できるrailsのヘルパーメソッドです。