今回はRailsにおけるimage_tagの使い方について書きます。
image_tagの基本
image_tagはRailsで用意されている、HTMLの<img>タグを生成するためのメソッドになります。
画像をページに表示させたい時に使用します。
構文は下記の通りです。
```
image_tag(source, options = {})
```
sourceの部分には画像がある場所を記述し、optionsにはclass名やalt属性を指定します。
※alt属性とは何かは、こちらのリンクでご確認ください。簡単に説明すると、画像が何らかの原因で表示されない時に、代わりに表示される文字になります。
[alt属性とは](https://www.seohacks.net/basic/terms/alt/)
クラス名とalt属性を使用すると下記のようになります。
```
image_tag 'icons/cat.jpg', :class="cat-icon", :alt => '猫の画像'
```
ちなみにerbファイルに記述する際は<%= %>で囲んであげる必要があります。
```
<%= image_tag 'icons/cat.jpg', :class="cat-icon", :alt => '猫の画像' %>
```
画像はどこに置いたらいいの？
①「app/assets/images」ディレクトリ
こちらに置く場合は、ただ単にファイル名を指定するだけでOKです。
```
<%= image_tag 'cat.jpg' %>
```
②「app/public」ディレクトリ
「public」ディレクトリ直下に画像ファイルを設置した場合
こちらに置く場合は、appからの相対パスを書く必要があります。
```
<%= image_tag '/cat.jpg' %>
```
ユーザーのアイコンなどをデフォルトで設定させたい時
ユーザー登録時に名前やメールアドレスなどを入力して、画像を登録せずに完了するケースが多いと思います。
新規登録が完了した際に、ユーザーの画像は何も入っていない状態なので、デフォルトで画像を入れる方法を書いておきます。
方法①CarrierWaveを使っていて、画像をアップロードしていない場合
image_uploader.rbにあるコードを少しいじり、デフォルトで設定したい画像を対象の場所に置くだけで設定完了します。
STEP1：image_uploader.rbをいじる
```app/uploaders/image_uploader.rb
(中略)
# Provide a default URL as a default if there hasn't been a file uploaded:
# def default_url(*args)
# # For Rails 3.1+ asset pipeline compatibility:
# # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
#
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
# end
(中略)
```
これを以下のように修正します↓↓
```app/uploaders/image_uploader.rb
(中略)
# Provide a default URL as a default if there hasn't been a file uploaded:
def default_url(*args)
# # For Rails 3.1+ asset pipeline compatibility:
# # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
"default.jpg"
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
end
(中略)
```
STEP2：app/assets/images直下にファイルを置く
image_uploader.rbで指定したファイル名(今回は「default.jpg」)を置きます。
これで完了です！
こうすることで、画像がアップロードされていない時に、carrierwaveが自動的にデフォルトで画像を設定してくれます。
方法②コントローラにあらかじめデータを用意しておく
コントローラでインスタンス変数にあらかじめデータを入れておくやり方です。今回はユーザー登録を想定しています。
```app/controllers/users_controller.rb
class UsersController < ApplicationController
(中略)
def create
@user = User.new(user_params)
#デフォルトで画像を設定しておく。ユーザーのimageカラムにデータを代入
@user.image = "default_icon.jpg"
if @user.save
redirect_to posts_path, success: '登録ができました'
else
flash.now[:danger] = "登録に失敗しました"
render :new
end
end
(中略)
def user_params
params.require(:user).permit(:name, :password, :password_confirmation, :image)
end
end
```
あとはビュー側で表示させればOKです！
```erb:user.show.html.erb
<%= image_tag @user.image_icon.url, class:"user-icon" %>
```
P.S.
CarrierWaveを使ってデフォルト画像を設定する方法は、実はデメリットがあります。
それはアップロードする必要がある画像部分が全部同じデフォルト画像になってしまうことです。
アップロードにより表示させる画像に見境なく用意した画像を使用してしまう為、表示にそぐわない部分にも適用されてしまう可能性があります。
アップロードする画像が一つの場合は問題ないですが、複数箇所ある場合はコントローラ側でそれぞれデータを渡した方が可用性があるかと思います。
参考
- [CarrierWaveを使って、ユーザー画像を設定する。](https://qiita.com/nekotanku/items/5da43600f35eada64eac)
- [ひとりぼっちのライフハックブログ](http://mooooooooooriiiiii.hatenablog.com/entry/2017/04/03/232402(https://qiita.com/nekotanku/items/5da43600f35eada64eac))
