【Rails】image_tagの基本とデフォルト画像の設定方法

8715 ワード
image_tag Rails Rails テキストリンク

image_tagの基本

image_tagはRailsで用意されている、HTMLのタグを生成するためのメソッドになります。
画像をページに表示させたい時に使用します。

構文は下記の通りです。

image_tag(source, options = {})

sourceの部分には画像がある場所を記述し、optionsにはclass名やalt属性を指定します。

※alt属性とは何かは、こちらのリンクでご確認ください。簡単に説明すると、画像が何らかの原因で表示されない時に、代わりに表示される文字になります。
alt属性とは

クラス名とalt属性を使用すると下記のようになります。

uby
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です！

user.show.html.erb
<%= image_tag @user.image_icon.url, class:"user-icon" %>

P.S.

CarrierWaveを使ってデフォルト画像を設定する方法は、実はデメリットがあります。
それはアップロードする必要がある画像部分が全部同じデフォルト画像になってしまうことです。
アップロードにより表示させる画像に見境なく用意した画像を使用してしまう為、表示にそぐわない部分にも適用されてしまう可能性があります。

アップロードする画像が一つの場合は問題ないですが、複数箇所ある場合はコントローラ側でそれぞれデータを渡した方が可用性があるかと思います。

参考

loraserverソースコード解析(一)構築
[3週間課題]Web開発総合クラス学習と開発ログ