【rails】image_tagの使い方

はじめに

image_tagの使い方について

image_tagの使い方

まずrailsでの画像の保存先についてですが、主に2つあります。

app/assets/imagesまたはpublicのどちらかです。

例えば、rails.jpgという画像ファイルがある場合、画像の呼び出し方については以下の通りです。

<%= image_tag 'rails.jpg' %>   # app/assets/imagesディレクトリ直下に保存した場合

<%= image_tag '/rails.jpg' %>   # publicディレクトリ直下に保存した場合

画像サイズを指定する方法

画像サイズを指定する方法は2通りあります。

size: '幅x高さ'と指定するやり方と、

width: '値’, height: '値'のように幅と高さを別々に指定するやり方です。

<%= image_tag 'rails.jpg', size: '50x50' %>

<%= image_tag 'rails.jpg', width: '50’, height: '50' %>

ホバーした時に違う画像にする方法

image_tagで呼び出した画像にカーソルを合わせた時、違う画像に変えたい場合はmousuoverを使います。

<%= image_tag 'rails.jpg', size: '50x50', mouseover: 'hover_rails.jpg' %>

上記のようにすると、ビューでrails.jpgという画像にカーソルを合わせた時、

hover_rails.jpgという画像に変更されます。