Rails プロフィール画像を表示する

今回はプロゲートの中級7章、「プロフィール画像を表示しよう」をやっていきます。

画像を表示する

ERBでの書き方

app/assets/images/wanko.pngを表示させる。

<%= image_tag 'wanko.png', class:"profile_img" %>

生成されるHTML

<img alt="wanko" class="profile_img" src="wanko.png">

imageカラムを追加する

rails g migration add_image_to_users image:string

画像をアップロードするフォームを作成

ERBでの書き方

<%= f.file_field :image, class:"form-cont・・" %>

生成されるHTML

<input class="form-cont・・" id="user_image" name="user[image]" type="file">

プロフィール画像を保存する

user_controller.rb

def create
  @user = User.new(user_params)
  #画像ファイル取得
  file = params[:user][:image]

  # fileが存在する場合、ファイルを読み込み、その内容をファイルへ保存。ファイル名を保存する。
  if !file.nil?
    file_name = file.original_filename

    File.open("public/user_images/#{file_name}", 'wb')
      {|f| f.write(file.read)}
    @user.image = file_name
  end
  if @user.save
    ・
    ・
end

インスタンスメソッドを定義

user_controller.rb内のファイル保存処理をupdateでも使えるように
インスタンスメソッド化する

models/user.rb

class User < ActiveRecord::Base
  
  # userオブジェクトから呼び出せるインスタンスメソッドとして定義
  def set_image(file)
    if !file.nil?
      file_name = file.original_filename
      File.open("public/user_images/#{file_name}", 'wb') { |f|
        f.write(file.read)
      }
      self.image = file_name
    end
  end
end

users_controller.rb

上記メソッドを用いて書き換えると以下のようになる。

def create
 @user = User.new(user_params)
 ＃画像ファイルを取得
 file = params[:user][:image]

 @user.set_image(file)
 if @user.save
  ・
  ・
end

プロフィール画像を表示する

プロフィール画像が存在する場合は表示し、存在しない場合はデフォルト画像を表示する

<% @users.each do |user| %>
  <% if user.image %>
    <%= image_tag "/user_image/#{user.image}" %>
  <% else %>
    <%= image_tag "wanko.png" %>
  <% end %>
<% end %>

image_tagに指定するURL

"/user_image/filename" : ”/"から始まる場合は、public以下に存在するファイルを示す。
"wanko.png" ："/"から始まらない場合はapp/assets/imagesに存在するファイルを示す。

ヘルパーメソッドを定義する

ERBにおける画像表示を行うヘルパーメソッド

module UserHelper
  def image_for(user)
    if user.image
      image_tag "/user_images/#{user.image}"
    else
      image_tag "wanko.png"
    end
  end
end

ヘルパーメソッドの呼び出し

<%= image_for(@user) %>