ユーザ画像の表示(Ruby on Rails)

プログラミングの勉強日記

2020年7月17日　Progate Lv.207
Ruby on RailsⅦ

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

　データベースに画像のファイル名を保存しておき、そのファイル名の画像を表示する。ファイルを保存するために、usersテーブルにimage_nameカラム(string型)を用意する。

初期画像の設定

　ユーザの登録時にimage_nameカラムの値がdefault_user.jpgとなるようにするcreateアクション内の@userを定義しているところで、newメソッドの引数としてimage_nameを追加する。

users_controller.rb

def create
  @user=User.new(
    name:params[:name]
    email:params[:email]
    image_name:"default_user.jpg"
  )
  ....

ビューに画像を表示

　HTMLの<img>タグを使う。画像はpublic/user_imagesフォルダに保存されているので、srcの値は/user_images/〇〇となる。

users/show.html.erb

<img src="<%= "/user_images/#{@user.image_name}" %> >

画像の送信

　<input>タグにtype=fileを追加することで画像ファイルを選択するボタンを表示できる。画像の送信は特殊なので、form_tagに{multipart: true}を追加する。

users/edit.html.erb

<%= form_tag("...", {multipart: true}) do %>

送信された画像の保存

　ファイル名をデータベースに保存するのはnameやemailの更新と同様に、@user.image_nameを上書きする。

users_controller.rb

def update
  @user=User.find_by(id: params[:id])
  @user.name=params[:name]
  @user.email=params[:email]
  @user.image_name="#{@user.id}.jpg"
  ...

　画像を保存するためには画像データを元に画像ファイルを受けとる必要がある。ファイルを作成するためには、Rubyで用意されているFileクラスを用いるが、画像データは特殊なテキストファイルなので、File.writeではなく、File.binwriteを使う。変数imageに対し、readメソッドを使うことでその画像データを取得できる。
　画像を保存する処理は画像データが送信されたときのみにする。この場合、画像ファイルをparams[:image]で受け取り、if params[:image]で画像が送信されているか判定できる。

users_controller.rb

def update
  if params[:image]
    @user.image_name="#{@user.id}.jpg"
    image=params[:image]
    File.binwrite("public/user_images/#{@user.image_name}", image.read)
  end
  ....