javascript - 如何在 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>

据温泉documentation我可以使用图标，指定要使用的图标引擎(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

Well 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');
  }
}

Demo

这只是一个示例，但它向您展示了如何轻松地为不同的屏幕使用不同的图像。

您甚至可以在不同的文件中定义不同屏幕的样式，并且仅在需要时才会再次使用它们:

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