如何在 ionic-4 中使用 png 图像作为选项卡图标

Question

这两天我一直在寻找用 png 替换 ion-tabs 图标的解决方案，我也在堆栈中找到了很多答案，但它不适用于 ionic-4 .

我在这个 link

中遵循了这个来自 ransoing 的答案

它在使用 SVG 且仅使用黑色填充时有效。但是我想要自定义多色 png 格式的图像。

Answer 1

我提供的 link 勒索解决方案有效。问题出在我的浏览器缓存

Answer 2

您可以使用 ionTabsDidChange 事件

<ion-tabs (ionTabsDidChange)="tabChange($event)">
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1">
            <!--<ion-icon name="flash"></ion-icon>-->
            <img src="../../assets/icon/tab/course_on@3x.png" *ngIf="selectTab==='tab1'">
            <img src="../../assets/icon/tab/course_off@3x.png" *ngIf="selectTab!=='tab1'">
            <ion-label>Tab1</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab2">
            <!--<ion-icon name="apps"></ion-icon>-->
            <img src="../../assets/icon/tab/record_on@3x.png" *ngIf="selectTab==='tab2'">
            <img src="../../assets/icon/tab/record_off@3x.png" *ngIf="selectTab!=='tab2'">
            <ion-label>Tab2</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

selectTab = 'tab1';
    tabChange(e) {
        this.selectTab = e.tab;
    }

如何在 ionic-4 中使用 png 图像作为选项卡图标

How use png images as tab icon in ionic-4

icons

png

ionic4

angular6