3
4

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.

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

Posted at

#目標

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

スクリーンショット 2021-09-05 4.50.51.png

#前提

  • 画像投稿機能実装済み
  • 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ディレクトリ配下に自分の指定したデフォルト画像を配置します。

スクリーンショット 2021-09-05 5.15.03.png

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

3
4
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
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?