Railsのerbファイルで画像を表示するにはimage_tagを使います。
image_tagを使うときに、id名やclass名の指定をすることはもちろんできますが、それ以外にも表示する画像のサイズを指定したり、ホバーやクリック時のイベントを設定することもできます。
ここでは便利なimage_tagの使い方を解説してます。
image_tagの使い方
基本構文
image_tagの基本構文は次のようになっています。
<%= image_tag( '画像ファイルのパス', [, オプション or HTML属性 or イベント属性] ) %>第1引数で画像のファイルパスを指定することで、指定した画像をimgタグとして表示することができます。
第2引数以降で、表示サイズの指定などのオプションや、HTML属性、イベント属性を指定できます。
カッコの省略
image_tag単体で使用する場合はカッコを省略することができます。
<%= image_tag '画像ファイルのパス', [, オプション or HTML属性 or イベント属性] %>ファイルパスの指定方法
Railsには主な画像の保存先として次の２つがあります。そして、それぞれでimage_tagでの呼び出し方が異なります。
- app>assets>imgaes配下
- public配下
| 保存先 | 呼び出し方 | 実例 |
|---|---|---|
| app>assets>imgaes配下 | ファイルパス冒頭にスラッシュをつけない | image_tag ‘hills.jpg’ |
| public配下 | 〃 にスラッシュをつける | image_tag ‘/hills.jpg’ |
app>assets>images と publicの違い
ルート直下のpublicディレクトリは公開用のリソースを配置する場所です。ファビコン画像やrobots.txtなど常に公開し続ける必要があるリソースを配置します。
これに対して、app > assets配下はRailsで処理対象のファイルを保存する場所です。画像ファイルに関しても基本的に、app>assets>images配下に配置していれば問題ありません。
画像のみを呼び出す
app > assets > images配下の場合
画像パスのみを指定することができます。
<%= image_tag 'hills.jpg' %> ↓ コンパイル後
<img src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">webpackを使ってコンパイルしている場合は、assets配下の画像にはハッシュ値がつきます。
webpackの使用はRails6からデフォルトになっています。
public配下の場合
public配下に設置した画像はコンパイルせずそのまま出力されます。
<%= image_tag '/images/sea.jpg' %> ↓ コンパイル後
<img src="/images/sea.jpg">image_tagで指定できるHTML属性の一覧
image_tagには、以下のHTML属性を指定することができます。
| HTML属性 | 説明 |
|---|---|
| :src | 画像ファイルのパス |
| :alt | alt属性 |
| :longdesc | 画像の説明文章のパス |
| :name | 画像の名前 |
| :ismap | サーバサイド・イメージマップを使用 |
| :usemap | 画像に対応させるイメージマップ |
| :align | 画像とテキストの配置 |
| :width | 画像の幅 |
| :height | 画像の高さ |
| :id | 要素固有の識別子 |
| :class | 要素を分類するクラス名 |
| :title | 要素の補足情報 |
| :style | 要素の補足情報 |
| :dir | 表記方向 |
| :lang | 基本言語 |
HTML属性の指定方法は、シンボルの識別子: 値 とします。複数ある場合はカンマでつなぎます。
また、上記で定義している属性以外も、属性名: 値とすればコンパイル後にその内容をHTMLタグに表示することができます。
例
<%= image_tag 'hills.jpg', test: 'これはテストです' %> ↓ コンパイル後
<img test="これはテストです" src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">image_tagでHTML属性やオプションなどを指定するときに、:シンボルの識別子 => 値 とする場合と、 シンボルの識別子: 値 と記述する場合があります。
これはどちらも同じ内容を表しています。省略形である後者を使うと記述がシンプルになります。
詳細については下記をご参考ください。
id名とclass名の指定
コンパイル後の画像にHTML属性としてid名やclass名を指定することができます。
id: 'id名'、class: 'class名' として指定します。
<%= image_tag 'hills.jpg', id: 'hills-image', class: 'test-image' %>↓ コンパイル後
<img id="hills-image" class="test-image" src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">alt属性の指定
コンパイル後の画像にalt属性を指定することができます。
alt: 'altの内容'として指定します。
<%= image_tag 'hills.jpg', alt: '丘の画像' %>↓ コンパイル後
<img alt="丘の画像" src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">画像の表示サイズを指定する方法
:sizeオプション
:sizeオプションを使うと表示する画像のサイズを指定することができます。
<%= image_tag( '画像ファイルのパス', size: '横幅x高さ' %>横幅と高さは数値のみで指定します。（単位のpxは省略します。つけるとサイズが反映されません）
コンパイル後にwidth属性とheight属性が指定された状態で表示されます。
実例
<%= image_tag 'hills.jpg', size: '300x200' %> ↓ コンパイル後
<img src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg" width="300" height="200">画像のサイズを%で指定する方法
画像のサイズをpxではなく％で指定する場合sizeオプションは使えません。主な対応策としては以下の２つがあります。
- widthとheight属性を使う
- classやid属性を指定して、スタイルシートで指定する
widthとheight属性で指定する場合は以下のようになります。
<%= image_tag( '画像ファイルのパス', size: '横幅x高さ' %>実例
<%= image_tag 'hills.jpg', width: '50%', height: '50%' %> ↓ コンパイル後
<img width="50%" height="50%" src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">画像にリンクを設置する
link_toの第１引数（アンカーテキスト）にimage_tagを指定することで、画像をリンクにすることができます。
link_toの使い方
<%= link_to リンクテキスト, パス %>もしくはカッコをつけても使えます。
<%= link_to (リンクテキスト, パス) %>画像をリンクにする
<%= link_to image_tag( ファイパル ), リンク先のパス %>link_toタグの中でimage_tagを使う場合は、image_tagにカッコが必須となります。
実例
<%= link_to image_tag('hills.jpg'), '/' %>↓ コンパイル後
<a href="/">
<img src="/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg">
</a>利用可能なイベント属性の一覧
オプションでイベント属性を指定すると、イベントに合った処理を実行することができます。
| イベント属性 | 説明 |
|---|---|
| :onclick | クリックされた時 |
| :ondblclick | ダブルクリックされた時 |
| :onmousedown | マウスのボタンが押し下げられた時 |
| :onmouseup | マウスのボタンが離された時 |
| :onmouseover | カーソルが重なった時 |
| :onmousemove | カーソルが移動した時 |
| :onmouseout | カーソルが離れた時 |
| :onkeypress | キーが押されて離された時 |
| :onkeydown | キーが押し下げられた時 |
| :onkeyup | キーが離された時 |
| :onfocus | フォーカスされた時 |
| :onblur | フォーカスを失った時 |
| :onselect | 入力欄のテキストが選択された時 |
| :onchange | フォーカスを失う際に値が変化し |
ホバー時に画像を切り替える
:onmouseoverイベントとonmouseoutイベントを使うとホバー時に画像を切り替えることができます。
<%= image_tag 'ファイルパス', onmouseover: "this.src=`ホバー時の画像パス`", onmouseout: "this.src=`ホバーを外したときの画像パス`" %>イベントで指定する画像は、"this.src=`画像パス`"とする必要があります。
画像パスはバッククオート（shift + @）で囲みます。
ダブルクオテーションの中で変数やrubyの処理を呼び出したい場合は #{変数 や rubyの処理}とします。
属性の中で、assets > images配下の画像パスを呼び出す場合は、asset_pathメソッドを使います。
asset_path('assets>images配下のファイルパス')※パスの指定時にimagesは不要です。
実例
<%= image_tag 'hills.jpg', onmouseover: "this.src=`#{asset_path('sea.jpg')}`", onmouseout: "this.src=`#{asset_path('hills.jpg')}`" %> ↓ コンパイル後
<img
onmouseover="this.src=`/assets/sea-7bf16b0ea4f043061c5b3d1b8ee4d00e1205b78b5fafd339ddfdafd7cfb6e29d.jpg`"
onmouseout="this.src=`/assets/hills-81ad00284717a925504e4c5278a679b8472bdc248f6d128e9da218b15b38db1b.jpg`"
src="/assets/sea-7bf16b0ea4f043061c5b3d1b8ee4d00e1205b78b5fafd339ddfdafd7cfb6e29d.jpg"
>
参考リンク
RailsでDBのデータに画像を添付するには、Active Storageを使うと便利です。
