离子 v2 如何在标题中插入徽标

Question

如何在 ionic v2 的标题中插入徽标？

<ion-header>
  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

Answer 1

    <ion-header>
  <ion-navbar>
    <ion-title>
<img alt="logo" height="40"   src="img/logo.png" > 
</ion-title>
  </ion-navbar>
</ion-header>

离子中的标题高度为 44px。因此，您需要确保徽标的大小小于该大小。

.title-image {
    margin-top: 8px;
    height: 27px;
}

Answer 2

就这么简单。用：

<img alt="logo" height="40"   src="img/logo.png" > 

和：

<ion-header>
 <ion-navbar>
   <ion-title>
    <img alt="logo" height="40"   src="img/logo.png" > 
   </ion-title>
</ion-navbar>
</ion-header>

Answer 3

我知道这是一个古老的问题，提供的答案是完全有效的，但是当我希望将我的应用程序图标添加到每个 Ionic 4 页面的页面标题左侧时，我偶然发现了这个问题。

因为我已经配置了 15 个左右的页面，所以我发现最简单的方法是在 global.scss 文件中设置样式，如下所示，使用这种方法我不必更改任何现有的页面组件。

您可能需要根据图像的大小调整 css 中的定位值，但供您参考，我的徽标图像为 16px x 16px。

全球.SCSS

ion-header {
    ion-toolbar {
        ion-title {
            background-image: url('./assets/icon/favicon.png');
            background-repeat: no-repeat;
            background-position: 5px 3px;
            padding-left: 27px;
        }
    }
}

我的

每个页面组件都已经具有以下结构，我不需要更改它，但它显示了我的项目中的 html 结构。

页面组件 HTML

<ion-header>
    <ion-toolbar>
        <ion-title translate>Label.Snags</ion-title>
    </ion-toolbar>
</ion-header>