come aggiungere un logo all'intestazione -bar in ionico

Question

Sto provando ad aggiungere un logo al centro della mia barra di intestazione usando Ionic. Qualche consiglio su come farlo?

Ecco il mio codice

<ion-nav-bar class="bar-light"> 
<!--Logo--> 
<ion-nav-buttons > 
<img class="title" src="https://s3-us-west 2.amazonaws.com/s.cdpn.io/139144/sp_symbol_option2_1.png"> 
</ion-nav-buttons> 
<ion-nav-buttons side="left"> 
<!--Left icons--> 
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"> 
</button></ion-nav-bar> 

Answer 1

ne dite di fare qualcosa di simile:

<ion-header-bar align-title="center" class="bar-positive"> 
    <div class="buttons"> 
    <button class="button" ng-click="doSomething()">Left Button</button> 
    </div> 
    <h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1> 
    <div class="buttons"> 
    <button class="button">Right Button</button> 
    </div> 
</ion-header-bar> 

Si può avere uno sguardo a questo plunker pure.

Alcune informazioni extra nel loro forum.

Answer 2

ho fatto questo semplicemente dal seguente:

Nel mio modello <ion-view title="{{pageTitle}}">

e nel mio controller $scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

Answer 3

Considerando che si sta utilizzando una barra di navigazione, è necessario utilizzare ionico nav-title. Ecco un esempio:

<ion-nav-bar align-title="center"> 
</ion-nav-bar> 
<ion-nav-view> 
    <ion-view> 
    <ion-nav-title> 
     <img src="logo.svg"> 
    </ion-nav-title> 
    <ion-content> 
     Some super content here! 
    </ion-content> 
    </ion-view> 
</ion-nav-view> 

Answer 4

<ion-view> 
    <ion-nav-title> 
      <img alt="Company Logo1" height="40" src="img/logo-07.png"> 
      <img alt="Company Logo2" height="40" src="img/logo-08.png"> 
    </ion-nav-title> 
</ion-view> 

Cambiare l'altezza dell'immagine e src secondo il vostro gusto. :)

Answer 5

Inserisci l'immagine desiderata nella cartella "www/img" nella tua app. Quindi utilizzare il codice qui sotto in index.html

<h1 class="title"><img class="title-image" src="img/mylogo.png" width="123" height="43" /></h1> 

Answer 6

Quanto segue può anche essere fatto:

<ion-view id = "yourHeader"> 
    <ion-nav-title> 
     <div id = "title">YOUR TITLE</div> 
     <img src="img/Message.png" class = "peers_msg_img"> 
     <img src="img/Notification.png" class="peers_profile_img"> 
     <img src="img/Peers.png" class="peers_alert_img"> 
    </ion-nav-title> 
    <ion-content> 
     //Some Content 
    </ion-content> 
</ion-view> 

La seguente direttiva è la chiave:

<ion-nav-title>