読者です 読者をやめる 読者になる 読者になる

気軽に楽しくプログラムと遊ぶ

自分が興味があってためになるかもって思う情報を提供しています。

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) %>