在侧面菜单中放置图像（Ionic） [英] Placing an image in side menu (Ionic)

问题描述

我试图在侧边菜单中放置从Facebook中检索的个人资料照片，如下所示：

p>

但我没有很多运气。

我的侧边菜单代码：

 < ion-侧菜单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 -clean ion-naviconmenu-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-navmenu-close href =＃/ app / home> 
主页
< / ion-item> 
< ion-item class =custom-item-navmenu-close href =＃/ app / recepten> 
收据
< / ion-item> 
< ion-item class =custom-item-navmenu-close href =＃/ app / perfect-gin> 
 Perfect Gin Tonic Mix 
< / ion-item> 
< ion-item class =custom-item-navmenu-close href =＃/ app / favorieten> 
收藏
< / ion-item> 
< ion-item class =custom-item-navmenu-close href =＃/ app / contact> 
联系人
< / ion-item> 
< / ion-list> 
< / ion-content> 
< / ion-side-menu> 
 
< / ion-side-menus> 
  

我想我不知道把div放在里面的位置。

我的div代码：

 < div class =profile_frame_container> 
< img class =profile_framesrc =/ img / profile_frame.pngalt => 
< img class =profile_pic_fbsrc =http://graph.facebook.com/XXXXX/picture?type=largealt => 
< / div> 
  

解决方案

您可以使用item-avatar CSS类。例如，将它放在< ion-content>< ul class =list>中的< ion-side-menu> ; ：

 < ion-side-menus enable-menu-with-back-views = 假 > 
< 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 -clean ion-naviconmenu-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>左菜单< / 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>九英寸钉子< / p> 
< / div> 
< a href =＃/ event / check-inclass =item icon-left ion-homemenu-close> Home< / a> 
< a href =＃/ event / attendeesclass =item icon ion-person-stalkermenu-close> Friends< / a> 
< a href =＃/ event / pricesclass =item icon ion-starmenu-close>价格< / a> 
< / ul> 
< / ion-content> 
< / ion-side-menu> 
< / ion-side-menus> 
  

下面是一个工作示例：

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

I am trying to place a profile pic retrieved from Facebook in the side menu like so:

But I am not having a lot of luck.

My code for the side menu:

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

I guess I am not sure where to place my div with the image in it.

Code of my 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>

解决方案

You can use item-avatar CSS class. For example place it in the <ion-side-menu>, inside <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>

Here is a working example:

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

这篇关于在侧面菜单中放置图像（Ionic）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！