带有自定义图像的离子离子选项卡图标 [英] ionic ion-tab icon with custom image

问题描述

这是我的关于离子论坛的原始问题。一段时间以来一直没有回复，所以我想我可以从这里得到一些帮助:(

Here's my original question on ionic forum. There has been no responses to it for some time so I thought I could hopefully get some help from here :(

所以，我的问题实际上就是标题。我想要在我的离子应用程序中使用我的自定义图像作为ion-tab的图标。我已经通过 ionic serve 检查它的工作原理如下：

So, my question is really the title. I would like to use my custom image as the icon for ion-tab in my ionic application. I've checked that it works via ionic serve by doing it as the following:

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设备上运行应用程序时，它显示无法加载资源：net :: ERR_FILE_NOT_FOUND 我的 tab-live 和 tab-live 图标无法加载。根据我的理解，当应用程序在加载到内存之前尝试加载某个资产文件时，会发生此错误。但只有 tab-live 图像无法加载，而所有其他图像加载正常。

however, when I run the app on my android device, it says Failed to load resource: net::ERR_FILE_NOT_FOUND for my tab-live and the tab-live icon won't load. From what I understand, this error occurs when the app tries to load a certain asset file before it gets loaded in to the memory. But only the tab-live image fails to load while all other images loads fine.

如果它可能是一个问题，标签/实时页面是应用程序启动时加载的内容，以及我的 live.png 的大小文件大约是 5.54kb 。我在此标签/实时页面中使用了另一张图片，该图片尺寸较大，但加载正常，我使用 img 标记 ng-src = {{btnImage}} 更改它。

If it could be of an issue, the tab/live page is what loads when the app starts, and the size of my live.png file is about 5.54kb. I have another image that I use in this tab/live page that is larger this image, but it loads fine and I use an img tag with ng-src={{ btnImage }} to change it around.

所以，什么可能导致这个问题，我该如何解决？

So, what could be causing this problem and how could I resolve it?

提前致谢。

推荐答案

离子的自定义图标，您可以创建您的班级名称

代码如下...

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

这篇关于带有自定义图像的离子离子选项卡图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！