#目標
円or丸の中に画像を表示する。
#前提
- 画像投稿機能実装済み
- CarrierWaveは導入済み
#実装
cssは使用せず今回はimage_tagの後に円形の指定"rounded-circle"
とサイズを指定しています。
これだけです。
あとif文で画像を指定した場合と指定されなっかた場合でで分けて指定してない場合はデフォルト画像になるように指定しています。
<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