Ионное фоновое изображение не отображается на устройстве

Я установил пользовательский класс .auth-pane на странице в моем приложении Ionic, чтобы создать его с помощью настраиваемого фона.

CSS для фона...

.auth-pane {
  background-image: url("../img/auth-background.jpeg");
  background-position: center;
  background-repeat: no-repeat;
}

применяется к <ion-view view-title="Auth" class="auth-pane">

Все работает отлично в Chrome (с использованием ionic serve), но когда я создаю и запускаю на устройстве, все, что я вижу, это простой белый фон.

Я попытался настроить путь для фонового изображения к img/auth-background.jpeg и /img/auth-background.jpeg, ни один из которых не имеет никакого значения (хотя абсолютный путь также работает в Chrome).

Ошибки (404 и т.д.) Не попадают в файл изображения, поэтому кажется, что файл найден.

Ответы

Ответ 1

Попробуй, он отлично поработал для моих Ионных проектов:

.auth-pane {
    background: url(../img/auth-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
}

Ответ 2

Я работал с Ionic2 и получал ту же ошибку, но мои другие изображения показывались. Мне пришлось уменьшить размер изображения, чтобы заставить его работать. Я не уверен, что это ограниченное знание.

Ответ 3

Дайте это, отлично поработали для меня.

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}

Ответ 4

Это не размер изображения, который препятствует его отображению в ionic2.Это то, что вы должны делать, когда локальное изображение не отображается:

удалите трейлинг../перед вашей папкой с изображением или именем изображения. Приложение уже знает, что все изображения хранятся по умолчанию в папке www. Таким образом, вам нужно будет использовать такой формат для всех ваших изображений: Пихтовые иконки: и для фонового image '

Ответ 5

.auth-pane {
   background: url('../img/image_name.jpg') no-repeat top;
  background-size: 100% 200px;
}

увеличить высоту, подходящую для вас

Ответ 6

.imgOFF {
  background: url(../assets/img/light/off.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
}

.imgON {
  background: url(../assets/img/light/on.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
  border-bottom: 4px solid black;
}

<ion-item>
  <ion-toggle color="royal" checked="false" [(ngModel)]="light1"></ion-toggle>
  <ion-label>
    Light 1
  </ion-label>
  <ion-icon item-start>
    <img *ngIf="light1" class="imgON">
    <img *ngIf="!light1" class="imgOFF">
  </ion-icon>
</ion-item>

Ответ 7

У меня была та же проблема, я попробовал множество опций, включая фоновый размер, но, наконец, я решил это странно, добавив в мой контейнер пустой контент:

<span class="auth-pane">
      <span></span>
</span>