2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#プログラミングの勉強日記
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
  ....
2
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?