Round cornered image/Profile Pic in Ionic

Im trying to show a round/circular image in profile component. I have tried following approaches.But nothing worked

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

css

.image {
    
    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');
}

Please suggest  one  possible  solution. as  it  is  common scenario for  every ionic developer.
1 Like

I do it like this…

<ion-img class=“profile-photo” (click)=“getImage()” src=“assets/img/port/default-profilepic.png”>

.profile-photo {
border-radius: 50% !important;
overflow: hidden;
}

3 Likes