More than 5 years have passed since last update.

devise使用時、usersにimageカラムを追加して画像を表示

Last updated at 2019-12-10Posted at 2019-02-20

#カラム追加

ターミナル

rails g migration AddImageToUsers image:string

ターミナル

rails db:migrate

データベースにimageカラムを追加しました

application_controller.rb

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :image]) 
end

ストロングパラメーターに、imageを追加

#carrierwaveの設定

もうすでに追加してる人は飛ばしましょう。

Gemfile

gem 'carrierwave'

ターミナル

bundle install

gem 'mini_magick'なんかもインストールしとくと元の画像をリサイズできます。

ターミナル

rails g uploader Image

上のコマンドで、app/uploaders/image_uploader.rbを生成。

app/models/user.rb

mount_uploader :image, ImageUploader

を追加。gemを入れた時は’rails s’し直しましょう
これで、'carrierwave'の設定は一旦終了です。
（参考：https://qiita.com/ttaka66/items/264dcb85e41f9135685c ）

#ファイル選択ボックス設置

registrations/new.html.erb

<div class="field">
  <%= f.label :image %><br/>
  <%= f.file_field :image %>
</div>

新規登録画面に、ファイル選択ボックスを設置。
これで新規作成画面から、画像をDBに保存できるようになります。

#アイコンの表示

users/index.html.erb

<img src=<%= @user.image %> class = "icon_image">

users.scss

.icon_image {
  width: 200px;
  height: 200px;
  //サイズ指定
  border-radius: 100px;
  //画像を丸くする
  object-fit: cover;
  //タテヨコ比を変えないままトリミング
}

終わり。