Question

我正在尝试将背景图像添加到离子框架中的按钮。它在chrome，ios模拟器中可以正常工作，但是当我在实际设备上尝试使用时，背景根本不显示。

这是我的模板

<div class="button-container">
    <button class="btn-stop" (click)="stop()">
  </button>
</div>

这是我的scss

    .button-container {
        width: 100%;
        position: absolute;
        bottom: 9%;
        z-index: 1;
    }

    .btn-stop {
    width: 120px;
    height: 120px;
    background-image: url('../../assets/imgs/bg.png');
        background-repeat: no-repeat;
        background-color: transparent;
        background-size: contain;

        &:after {
            content: 'DEMAND STOP';
            font-size: 2rem;
            font-weight: bold;
        }
    }

不知道为什么要在其他两个版本（即chrome和模拟器）上运行。

Answer 1

找到问题所在后，我将发布答案。

至少对于iOS设备，图像路径应为assets/imgs/bg.png。

按钮上的背景图片未显示

1 个答案: