Question

我想让我的用户上传的头像在Udemy的我的rails应用项目中上传。图像仍然以上传的方式显示出来。

下面是我的show.html.erb文件

<div class="row">
<div class="col-md-3 text-center">
 <div class="avatar"><%= image_tag @user.profile.avatar.url %></div>
</div>
<div class="col-md-6">
  <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
  <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3>
  <div class="well profile-block profile-description">
   <h3>Background</h3>   
   <%= @user.profile.description %>
  </div>

  <% if current_user.plan_id == 2 %>
  <div class="well profile-block contact-info">
    <h3>Contact:</h3>  
    <%= @user.profile.phone_number %><br/>
    <%= @user.profile.contact_email %><br/>
  </div> 
  <% end %>

</div>

以下是我的用户，css.scss文件

<div class="row">
<div class="col-md-3 text-center">
 <div class="avatar"><%= image_tag @user.profile.avatar.url %></div>
</div>
<div class="col-md-6">
  <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
  <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3>
  <div class="well profile-block profile-description">
   <h3>Background</h3>   
   <%= @user.profile.description %>
  </div>

  <% if current_user.plan_id == 2 %>
  <div class="well profile-block contact-info">
    <h3>Contact:</h3>  
    <%= @user.profile.phone_number %><br/>
    <%= @user.profile.contact_email %><br/>
  </div> 
  <% end %>

</div>

Answer 1

我认为设置您的avatar课程以使图片呈圆形是一种更好的方法。

在CSS中，您可以将其定义为：

.avatar {
  border-radius: 50%;
  // also might be good to set width and height
}

Answer 2

看起来您可能正在使用Twitter Bootstrap。如果是这样，内置了一个方便的CSS类。

只需将class: 'img-circle'添加到您的image_tag

即可

...
#change this line as follows
<div class="avatar"><%= image_tag @user.profile.avatar.url, class: 'img-circle' %></div>
...

This page Bootstrap文档有很多有用的信息和示例。

圆形的头像红宝石在铁轨上

2 个答案: