Question

已经过了两天，我正在寻找一种用png替换ion-tabs图标的解决方案，我在堆栈中也找到了很多答案，但是它不适用于 ionic-4 。

我在link的ranso中遵循了这个答案

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

Answer 1

我提供的链接上的赎回解决方案正在工作。只是我的浏览器缓存造成了问题

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图像用作选项卡图标

2 个答案: