Блог

Главная - Вопросы по программированию - Как установить фоновое изображение в Ionic 4

Как установить фоновое изображение в Ionic 4

#html #css #ionic-framework #ionic4

#HTML #css #ionic-framework #ionic4

Вопрос:

Ionic

Как установить фоновое изображение в Ionic 4? Я пробовал несколько способов, но безрезультатно.

Я следую этому руководству: https://javebratt.com/ionic-firebase-tutorial-auth /

Я также пытался

—background: #fff url(‘../../assets/images/cover.jpg ‘) центр / обложка без повторов; }

Буду признателен за любую помощь. Я использую Ionic 4

 ion-content {
  .background{
        background-image: url('../../../assets/img/login-image.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
  }
form {
  margin-bottom: 32px;
  button {
    margin-top: 20px !important;
  }
}

p {
  font-size: 0.8em;
  color: #d2d2d2;
}

ion-label {
  margin-left: 5px;
}

ion-input {
  padding: 5px;
}

.invalid {
  border-bottom: 1px solid #ff6153;
}

.error-message {
  min-height: 2.2rem;
  ion-label {
    margin: 2px 0;
  }
}
}  
 <ion-content class="background">
<form [formGroup]="loginForm">
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input
      formControlName="email"
      type="email"
      placeholder="Your email address"
      [class.invalid]="!loginForm.controls['email'].valid amp;amp;
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid amp;amp;
       loginForm.controls['email'].touched"
  >
    <ion-label>Please enter a valid email address.</ion-label>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input
      formControlName="password"
      type="password"
      placeholder="Your password"
      [class.invalid]="!loginForm.controls['password'].validamp;amp; loginForm.controls['password'].touched"
    >
    </ion-input>
    </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      amp;amp; loginForm.controls['password'].touched"
  >
    <ion-label>Your password needs more than 6 characters.</ion-label>
  </ion-item>

  <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
    Log In
  </ion-button>
</form>

<ion-button expand="block" fill="clear" routerLink="/signup">
  Create a new account
</ion-button>

<ion-button expand="block" fill="clear" routerLink="/reset-password">
  I forgot my password 🙁
</ion-button>
  <ion-footer no-shadow>
    <div>
      <button ion-button icon-left block>
              Login with Google
      </button>
    </div>
      <div>
      <button ion-button icon-left block>
        Login with Facebook
      </button>
    </div>
  </ion-footer>
</ion-content>

Комментарии:

1. Правильный ли путь к изображению? Вы получаете какую-либо ошибку в консоли, например, не удается получить изображение?

2. Да, это правильно. Когда я все равно его изменяю, я получаю ошибку консоли.

Ответ №1:

Если вам нужно больше контроля, сначала установите для переменной css —background значение none, а затем укажите обычные свойства css:

 ion-content {
  --background: none;
  background-image: url('../../../assets/img/login-image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Ответ №2:

Это работало как в браузере, так и на реальном устройстве:

  --background: url('/assets/recover_form_bg.jpg') no-repeat center/cover fixed;

Не используйте ../.. /../assets path для изображения, потому что это не работает на реальном устройстве.

Ответ №3:

Это сработало

 ion-content {
  --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
}

Ответ №4:

Я тестировал в Android. У меня все работает нормально.

SCSS:

 ion-content {
  --background: #34B0D2 url('../../assets/yourimage.jpeg') no-repeat center top fixed;
  background-size: cover;      
}

Ответ №5:

Давайте попробуем эти шаги и посмотрим, как это происходит:

Вы можете выбрать содержимое ion непосредственно в вашем CSS вместо создания другого класса CSS. Я предполагаю, что вам нужно фоновое изображение для страницы. Итак, захватите всю страницу по элементу ion-content. Затем используйте обычные свойства CSS для фона элемента. Но при использовании Ionic убедитесь, что относительные пути имеют неправильную форму. Например, я думаю, что ваш путь к ресурсам (изображению) неверен. Вот почему ionic не может отобразить / найти его на устройстве. Фрагмент кода, который я привожу ниже, работает для меня. 

  page-details {
     ion-content {
      --background: none;
      background-image: url("assets/imgs/img_bg_floral.png");
      -webkit-background-image: url("../../assets/imgs/img_bg_floral.png");          
      background-repeat: no-repeat;
      background-size: cover;
     }

Комментарии:

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

2. Рад узнать, что вы нашли свое решение.