按钮上的背景图像不显示答案

【问题标题】：Background image on button not showing按钮上的背景图像不显示
【发布时间】：2018-08-14 00:28:02
【问题描述】：

我正在尝试将背景图像添加到离子框架中的按钮。它在 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 和 emulator。

【问题讨论】：

您的图片网址../../assets/imgs/bg.png 在所有环境中都正确吗？检查您是否可以访问该网址下的图像。也许您在设备上有不同的文件夹结构并且不需要../../。
@fridoo 如何在设备上找到正确的文件夹结构？
请尝试background-image: url('../assets/imgs/bg.png');

标签： html css angular ionic-framework ionic3

【解决方案1】：

我会在发现问题后发布答案。

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

【讨论】：