Question

这是我的original question on ionic forum。一段时间以来一直没有回复，所以我想我可以从这里得到一些帮助:(

所以，我的问题实际上是标题。我想在我的离子应用程序中使用我的自定义图像作为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设备上运行该应用时，它为我的Failed to load resource: net::ERR_FILE_NOT_FOUND显示tab-live，并且tab-live图标将无法加载。根据我的理解，当应用程序在加载到内存之前尝试加载某个资产文件时，会发生此错误。但只有tab-live图像无法加载，而所有其他图像加载正常。

如果可能存在问题，tab/live页面会在应用启动时加载，而live.png文件的大小约为5.54kb。我在此tab/live页面中使用了另一张图片，该图片的图片较大，但加载得很好，我使用带有img的{{1}}标记进行更改。

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

提前致谢。

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

请检查文件名称＆amp;图像文件的扩展名。当您使用“离子服务”测试应用程序时，它不区分大小写但在Android设备上区分大小写非常重要。

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

Answer 4

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

＆＃13;

/* 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;
    }

＆＃13;

<!-- 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>

＆＃13;

谢谢：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>

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

5 个答案: