圆形角形图像/配置文件Pic在Ionic 2/3

Question

我试图在配置文件组件中显示圆形/圆形图像。我尝试了以下方法。但没有任何效果

1）

<ion-avatar>
<img  [src]=""  *ngIf=""/>
</ion-avatar>

2）

<img class="image"/>

css
.image {
    //its  working 
    margin: auto;
     height: 100px; 
     width: 100px; 
   // border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px gray;
    display: block;

     background-image: url('/assets/img/pixels.jpg');
}

接近一个产生Squared图像的方法，该图像包含在下面。

请建议一种可能的解决方案。因为这是每个离子开发者的常见情况。

Answer 1

试试这个：

HTML：

 <ion-avatar item-left (click)="entityProfile(gossip.gossip_about.ID)">
     <img [src]="gossip.gossip_about.img">
 </ion-avatar>

SCSS：

ion-avatar img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
}

Answer 2

我对我的回答感到惊讶。以下是我清楚得到答案的方法。它非常适合我。

  

my profile.ts

Monoid

  

my profile.html

Prelude> ("4+", (4+)) <*> ("10",10)
("4+10",14)

  

结果---我的原始图像的高度和宽度相等，为88px X 88px

  

您自己的图像的结果使用不同高度和宽度的原始图像在281px X 256px（所以为什么它不起作用的是你有不相等的高度和宽度）

现在，我将原始图像调整为相同的高度和宽度，为200px X 200px

  

结果