如何在Onsen-UI中使用自定義圖像/圖標

Question

我正在使用Onsen-UI框架和AngularJS開發移動應用程序。 我想為按鈕使用一些自定義圖像，但是當我在某些手機上打開應用程序時，它們看起來模糊或定義不清晰。

這是我的代碼（我在輪播中使用圖片）：

<ons-carousel swipeable initial-index="0" auto-scroll>
  <ons-carousel-item class="list-action-item">
    <!-- item title -->
  </ons-carousel-item>

  <ons-carousel-item class="list-action-menu">
    <!-- item action menu -->
    <img src="../images/my_custom_image.png">
  </ons-carousel-item>
</ons-carousel>

根據Onsen 文檔，我可以使用圖標，指定要使用的圖標引擎（Ionicons或Font-Awesome），如下所示：

  <ons-carousel-item class="list-action-menu">
    <!-- item action menu -->
    <ons-icon icon="fa-angle-left" size="40px"></ons-icon>
  </ons-carousel-item>

但是在這種情況下，我無法設置自定義圖片。

過去，我使用Eclipse開發了一些Android應用，並且我擁有不同的文件夾來處理不同的屏幕分辨率。 我的意思是：

那么，用溫泉怎么做呢？

Answer 1

好的Onsen UI使用字體作為圖標。 因此，萬一您希望Onsen UI期望所有功能都能正常工作，則需要使用自定義字體並使用該字體。 但是創建一個可能並不容易，因此我希望您只想擁有一個自定義映像，該映像在服務器上作為單獨的文件存在。

從技術上講，使用字體的性能更高，因為您可以將數百個圖標存儲在字體中，因此瀏覽器對所有圖標僅發出1個請求，而不是每個圖標1個請求。 它還可以更有效地存儲圖標。 但是，請不要考慮性能優化（如果您有興趣，還可以檢查CSS Sprites和base64 ）-這不是您的問題，但這仍然與問題有關，因此我認為我也可以提一下。

現在為答案：

由於您可能不會使用字體，因此可以定義自己的類，並針對不同的屏幕尺寸使用不同的背景圖像和大小。

.my-custom-icon {
  font-size: 40px;
  height: 1em;
  background: url('https://onsen.io/images/common/docs-guide-icon.png') center no-repeat;
}


@media only screen and (max-width: 300px) {
  .my-custom-icon {
    font-size: 30px;
    background-image: url('https://onsen.io/images/common/docs-css-components-icon.png');
  }
}

演示版

這只是一個示例，但它向您展示了如何在不同的屏幕上使用不同的圖像。

您甚至可以在不同文件中為不同屏幕定義樣式，並且僅在需要時才使用它們：

<link rel="stylesheet" media="(max-width: 300px)" href="small.css" />