在側面菜單中放置圖像（離子）

Question

我試圖在側邊菜單中放置從Facebook檢索到的個人資料圖片，如下所示：

但我沒有太多運氣。

我的側邊菜單代碼：

<ion-side-menus enable-menu-with-back-views="false">

  <ion-side-menu-content>
    <ion-nav-bar class="bar-dark custom-header">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive custom-header">
    </ion-header-bar>
    <ion-content class="custom-sidemenu">
      <ion-list>
        <ion-item class="custom-item-nav" menu-close href="#/app/home">
          Home
        </ion-item>
        <ion-item class="custom-item-nav"  menu-close href="#/app/recepten">
          Recepten
        </ion-item>
        <ion-item class="custom-item-nav"  menu-close href="#/app/perfect-gin">
          The Perfect Gin Tonic Mix
        </ion-item>
        <ion-item class="custom-item-nav"  menu-close href="#/app/favorieten">
          Favorieten
        </ion-item>
        <ion-item class="custom-item-nav"  menu-close href="#/app/contact">
          Contacteer ons
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

我想我不知道在哪里放置我的div與圖像。

我的代碼：

<div class="profile_frame_container">
        <img class="profile_frame" src="/img/profile_frame.png" alt="">
        <img class="profile_pic_fb" src="http://graph.facebook.com/XXXXX/picture?type=large" alt="">
    </div>

Answer 1

您可以使用item-avatar CSS類。 例如，將它放在<ion-content><ul class="list">里面的<ion-side-menu> <ion-content><ul class="list"> ：

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <div class="item item-avatar">
            <img src="//ionicframework.com/img/docs/spengler.jpg">
            <h2>Pretty Hate Machine</h2>
            <p>Nine Inch Nails</p>
          </div>
          <a href="#/event/check-in" class="item icon-left ion-home" menu-close>Home</a>
          <a href="#/event/attendees" class="item icon ion-person-stalker" menu-close>Friends</a>
          <a href="#/event/prices" class="item icon ion-star" menu-close>Prices</a>
        </ul>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>

這是一個工作示例：

http://codepen.io/beaver71/pen/obGQXV

Answer 2

對於> ionic2

<ion-card text-center class="hide-card">
    <img src="http://placehold.it/300x200" class="custom-avatar"/>
    <h2>Victorcodex</h2>
    <p>Have some p tag here</p>
    <p>I am the third guy inline here</p>
    <hr>
</ion-card>

.hide-card {
  -webkit-box-shadow: none!important;
}

.custom-avatar {
  height: 30vw;
  width: 30vw;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

知道這是否有用。