无法制作圆形头像

Question

我正在尝试在 ionic2 框架上的 side-menu 的 header 中做一个圆形头像。

这是我的代码

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar >
     <!-- <ion-title>Options</ion-title>-->
     <span><ion-avatar item-left>
        <img src="./assets/img/defAvatar.png">
      </ion-avatar> <h1>User</h1></span>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

当您将此代码启动到 ionic serve --lab 时，这就是结果

有什么问题吗？

Answer 1

试试 ion-item

<ion-header>
    <ion-toolbar >
     <ion-item>
      <ion-avatar item-left>
        <img src="./assets/img/defAvatar.png">
       </ion-avatar> <h1>User</h1>
      </ion-item>
    </ion-toolbar>
  </ion-header>

勾选here

无法制作圆形头像

Not able to make a rounded avatar

android

avatar

ios

ionic2