LoginSignup
50
58

More than 3 years have passed since last update.

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

Last updated at Posted 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;
  //タテヨコ比を変えないままトリミング
}

終わり。

50
58
2

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
50
58