【Rails】プロフィール画像丸くサイズや形（メモ）

3365 ワード
Rails 画像 円型 初心者 Ruby Ruby テキストリンク

目標

円or丸の中に画像を表示する。

前提

  • 画像投稿機能実装済み
  • CarrierWaveは導入済み

実装

cssは使用せず今回はimage_tagの後に円形の指定"rounded-circle"とサイズを指定しています。
これだけです。
あとif文で画像を指定した場合と指定されなっかた場合でで分けて指定してない場合はデフォルト画像になるように指定しています。

app/views/users/show.html.erb
   <h1><%= @user.name %>詳細ページ</h1>

    <% if @user.image? %>                                                              
      <%= image_tag @user.image.url, class: "rounded-circle", size: "150x150" %>
    <!--##画像が設定されてない場合-->
    <% else %>
      <%= image_tag "default.png", size: "150x150" %>
    <% end %>

画像を指定しなかった場合です。
app/assets/imagesディレクトリ配下に自分の指定したデフォルト画像を配置します。

ざっくりとはしていますがこれで円形に画像を指定することができました。
簡単な指定なのですが方法がいくつかあって、調べるのに時間がかかって大変だった思い出があるので、備忘録として残しておきます。
もし、同じように悩んでる方の参考になれば幸いです。
画像投稿機能も投稿してるのでもし参考程度に良ければ見てみてください。
https://qiita.com/moru0606/items/ae7b1742787f50b4e254

参考リンク

cssで画像丸く:https://qiita.com/mam-e/items/1d2be069a5d2190ec505
画像投稿機能：https://qiita.com/k19911848/items/a082cc4e0c0103f935b1
デフォルト画像指定：https://qiita.com/Toshimatu/items/a6382efd410fe5544406