带有自定义图像的离子标签图标

Question

这是我的original question on ionic forum。已经有一段时间没有回复了，所以我想我希望能从这里得到一些帮助:(

所以，我的问题确实是标题。我想在我的 ionic 应用程序中使用我的自定义图像作为 ion-tab 的图标。我已经检查了它是否可以通过ionic serve 工作，方法如下：

tabs.html

<ion-tabs class="tabs-icon-bottom tabs-color-active">
  <!-- this icon does not load -->
  <ion-tab title="LIVE" icon="tab-live energized" href="tab/live">
    <ion-nav-view name="tab-live"></ion-nav-view>
  </ion-tab>

  <ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay">
    <ion-nav-view name="tab-replay"></ion-nav-view>
  </ion-tab>

  <ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting">
    <ion-nav-view name="tab-setting"></ion-nav-view>
  </ion-tab>
</ion-tabs>

style.css

...
.tab-live {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/live.png');
}
.tab-replay {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/replay.png');
}

但是，当我在我的 Android 设备上运行该应用程序时，我的 tab-live 显示为 Failed to load resource: net::ERR_FILE_NOT_FOUND，而 tab-live 图标不会加载。据我了解，当应用程序在加载到内存之前尝试加载某个资产文件时会发生此错误。但是只有tab-live 图像无法加载，而所有其他图像都可以正常加载。

如果有问题，tab/live 页面是应用程序启动时加载的内容，我的live.png 文件大小约为5.54kb。我在此 tab/live 页面中使用了另一个图像，该图像更大，但它加载得很好，我使用带有 ng-src={{ btnImage }} 的 img 标记来更改它。

那么，是什么导致了这个问题，我该如何解决呢？

提前致谢。

Answer 1

离子的自定义图标，你可以创建你的类名

代码如下...

.export-inactive{
    content: url('../img/icons/task-icons/export-inactive.svg'); !important;
}

例如

<div class="tabs tabs-icon-top">
<a class="tab-item">
            <i class="icon export-inactive"></i>
            Export
        </a>
</div>

Answer 2

此错误表示未找到该文件。路径错误或文件不存在于您想要的位置。你确定你的图片在 www/img 文件夹中，因为它在 android 中对我有用。

Answer 3

请检查图像文件的文件名和扩展名。 当您使用“ionic serve”测试应用时，它不区分大小写，但在 Android 设备上区分大小写很重要。

例如： 将“myicon.PNG”更改为“myicon.png”

Answer 4

我一直致力于实现相同的功能并面临类似的问题。这是我的actual reply on Ionic Forum 我不知道问题是否仍然存在，但也许我的回答会帮助可能遇到此问题的开发人员。 所以，这里是如何钉它：

/* In tabs.scss: */

// CSS for Settings icon.
    .ion-ios-settings, .ion-md-settings {
        content: url(../assets/icon/cutom-selected-icon.svg);
        width: 24px;
    }
    .ion-ios-settings-outline {
        content: url(../assets/icon/cutom-unselected-icon.svg);
        width: 24px;
    }
    .ion-md-settings[ng-reflect-is-active=false]{
        content: url(../assets/icon/cutom-unselected-icon.svg);
        width: 24px;
    }

<!-- In tabs.html: -->

<ion-tabs  [selectedIndex]="indexselected" >
  <ion-tab [root]="tab1Root" tabTitle="Settings" tabIcon="settings"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="abc" tabIcon="abc"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="xyz" tabIcon="xyz"></ion-tab>
</ion-tabs>

谢谢:D

Answer 5

您可以使用 SCSS 进行如下操作。

SCSS 文件

// custom icons
ion-icon {
    &[class*="custom-"] {
        margin: 0 5px 0 0;
        vertical-align: middle;
        $sz: 20px;
        width: $sz;
        height: $sz;
    }
    //in case of active
    &[class*="home"][ng-reflect-is-active="true"] {
        background: url("../assets/imgs/home_active.png") no-repeat 50% 50%;
        background-size: contain;
    }
    //in case of inactive
    &[class*="home"][ng-reflect-is-active="false"] {
        background: url("../assets/imgs/home_inactive.png") no-repeat 50% 50%;
        background-size: contain;
    }
}

HTML

<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-chat"></ion-tab>