Round cornered image/Profile Pic in Ionic

Ionic Framework ionic-v3
1

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
2

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;
}

4 Likes