すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 image_tagを使って簡単に画像を表示させよう!

ぴっかちゃん
ぴっかちゃん

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

image_tagとは

image_tagの使い方

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

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

classの指定

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

ビューファイル
1
<%= image_tag 'test.jpg', class: 'hoge' %>

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

ビューファイル
1
<img src="/assets/test.jpg" class="hoge">

画像ファイルの置き場所

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

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

ビューファイル
1
<%= image_tag '/test.jpg' %>

画像のサイズの指定

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

ビューファイル
1
<%= image_tage 'test.jpg', size: '100x200' %>

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

代替テキストの指定

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

ビューファイル
1
<%= image_tage 'test.jpg', alt: 'テスト画像' %>
ぴっかちゃん

Ruby on Railsについて一通り学びたい方は、こちらの参考書もよく使われていますよ!

実際のアプリでimage_tagを使ってみよう

それでは実際にアプリの中でページネーションを実装してみましょう。
下記のコマンドを一つずつ実行していきましょう。

ターミナル
1
2
3
git clone -b image_tag https://github.com/miyagit/programan_dojo.git #1.リポジトリを複製する
cd programan_dojo #2.programan_dojoディレクトリへ移動
bundle install  #3.gemをインストール

上記のbundle installを実行した際にrbenv: version ‘2.4.1’ is not installedと表示された場合は、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)に書き換えてください。

最後に以下を実行します。

ターミナル
1
rails db:create && rails db:migrate && rails db:seed #4.データベース作成と初期データ投入

上記を実行すると「環境構築が完了しました。」と表示されるので、アプリケーションが動作するかrails sコマンドで起動しましょう。

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

環境構築

画像を表示させてみよう

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

top.html.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

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

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

ビューファイル
1
<%= image_tag "ramen.jpeg", size: "300x250" %>

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

サイズの設定

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

ビューファイル
1
<%= image_tag "ramen.jpeg", size: "300x250", alt: "ラーメン" %>

これで何らかの事情で画像が表示されなかった場合、画像の代わりに「ラーメン」と表示されます。

コンパイルされると下記のコードになっています。

ビューファイル
1
<img alt="ラーメン" src="/assets/ramen-b561f56a99e7fb44ca693afa3559aa327a29baf408129b37b0ccd1a24f06ddeb.jpg" width="300" height="250" />

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

この記事のまとめ

  • image_tagは、簡単に画像を表示させるタグを作成できるヘルパーメソッド
  • 簡単にimgタグを作成することが出来る
  • <%= image_tag 'ファイル名', 'オプション' %>を記述する