【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: 'テスト画像' %>

実際のアプリで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を下記のように編集してください。

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内に記述しましょう。
それでは実際に表示されるか確認してみましょう。

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

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

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属性がちゃんとセットされているのが確認できます。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ