帶自定義圖像的離子離子選項卡圖標

這是我的original question on ionic forum。有一段時間沒有迴應，所以我想我可以從這裏得到一些幫助:(帶自定義圖像的離子離子選項卡圖標

所以，我的問題是真正的標題。我想使用我的自定義圖像作爲離子 - 。在我的應用離子標籤我檢查了，它通過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頁面中使用了另一張圖片，但該圖片加載得很好，我使用img標籤和ng-src={{ btnImage }}對其進行了更改。

那麼，什麼可能導致這個問題，我該如何解決它？

在此先感謝。

來源

2016-05-30 ohnu93

此錯誤表示找不到文件。路徑錯誤或文件不存在於您想要的位置。你確定你的圖片在www/img文件夾中，因爲它在android中適用於我。

來源

2016-05-30 06:29:21 ProCylon

那麼它的擺在我的WWW/img文件夾，當我執行'ionic serve'並在localhost上檢查它時，它顯示圖像沒有任何問題。它只在我的Android設備上運行時纔會發生。任何猜測爲什麼它不會加載？ – ohnu93

奇怪。你可以嘗試刪除平臺，並通過使用以下命令再次添加它 - 離子平臺rm android 離子平臺添加android – ProCylon

好像似乎仍然沒有運氣：S – ohnu93

對離子的自定義圖標，你可以創建你的類名

代碼波紋管......

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

來源

2017-02-27 10:59:48

帶自定義圖像的離子離子選項卡圖標

回答

相關問題