목표

원 또는 원 안에 이미지를 표시합니다.

전제

이미지 게시 기능 구현

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 디렉토리 아래에 사용자가 지정한 기본 이미지를 배치합니다.



거칠게 하고 있습니다만 이것으로 원형으로 화상을 지정할 수 있었습니다.
간단한 지정이지만 방법이 몇 가지 있고, 조사하는 데 시간이 걸리고 힘들었던 추억이 있으므로 비망록으로 남겨 둡니다.
만약, 똑같이 고민하고 있는 분의 참고가 되면 다행입니다.
이미지 투고 기능도 투고하고 있지만 참고 정도로 좋으면 봐 주세요.
htps : // m / 0606 / / ms / Ae 7b1742787f50b4 254

참고 링크

css로 이미지 둥근 : htps : // m / m-m / ms / 1d2 069 a 5d2190 e c505
이미지 게시 기능 : h tps:// 퀵했다. 작은 m/k19911848/있어 MS/아 082 C4 그림 0c0103f935b1
기본 이미지 사양 : htps : // 이 m / 토시 마츠 / ms / 6382 에드 fd410 5544406