【问题标题】:Add image to ionic view header/title to tab将图像添加到离子视图标题/标题到选项卡
【发布时间】:2017-01-06 03:21:41
【问题描述】:

我有以下代码:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
    This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
    </p>
    <p>
      To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
    </p>
    <p>
    If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
    </p>
    <p>
      For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available.
    </p>
  </ion-content>
</ion-view>

从离子选项卡启动项目 (https://github.com/driftyco/ionic-starter-tabs) 生成,我想将标题从“仪表板”更改为仅显示图像。 我试过这个(how to add a logo to header -bar in ionic),但它在离子视图中不起作用。 所以我尝试添加:

  <h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1>

之后:

<ion-view view-title="Dashboard">

但不起作用

【问题讨论】:

    标签: javascript angularjs cordova ionic-framework tabs


    【解决方案1】:

    你可以在你的控制器中尝试这样的事情:

    $scope.navTitle="<img class='title-image' src='http://www.ionicframework.com/img/ionic-logo-white.svg' width='123' height='43' />";
    

    如果不起作用,请删除您的 view-title 并保留上面的行!

    或者试试这个:

    <ion-view>
       <ion-nav-title>
          <img src='http://www.freeiconspng.com/uploads/multimedia-photo-icon-31.png' width='123' height='43'/>
       </ion-nav-title>
    </ion-view>
    

    第二个选项对我有用!不要忘记删除您的视图标题!

    祝你好运!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-07-29
      • 2017-10-22
      • 2015-02-24
      • 1970-01-01
      • 2017-10-13
      • 2014-08-28
      • 1970-01-01
      • 2016-08-21
      相关资源
      最近更新 更多