Question

我在home.scss中有这个课程

.img_button{
    color: #fff;
    width: 200px;
    height: 70px;
    background: none;
    box-shadow: 0px 0px 0px 0px;
    background-image: url("/build/images/lotus_button.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: 200px auto;
    padding: 0 0 0 3em;
    background-color: transparent !important;
}

在home.html

<ion-content class="home" padding>
  <button class="img_button">Image Custom Button</button>
</ion-content>

它在浏览器中运行良好，但不在ionic emulate ios或phonegap serve中。

但是，在home.scss中的.img_button中，我将background-image更改为url，如下所示：background-image: url("http://www.clker.com/cliparts/d/X/i/j/F/U/expences-button-png-hi.png");它适用于所有ionic emulate ios，phonegap serve和浏览器。

我不确定如何在scss中使用我的本地路径作为background-image。

请帮忙。谢谢。

Answer 1

可能是一堆事情，我要做的第一件事就是debug in Chrome或Safari并查看控制台选项卡以查看是否有任何明显的错误。接下来看一下Networking选项卡。可能是从白名单问题到图像的任何内容都没有包含在您的构建中。

Answer 2

我终于通过改变

中的背景图像来管理它

background-image: url("/build/images/lotus_button.png");

到

background-image: url("../../build/images/lotus_button.png");

在另一种情况下，如果你想使用img src的图像路径，请使用：

<img src="/build/images/lotus_button.png">

图像按钮无法在模拟器和PhoneGap中工作 - Ionic 2

2 个答案: