1
votes

Comment définir une image d'arrière-plan dans Ionic 4

Comment définir une image d'arrière-plan dans Ionic 4? J'ai essayé plusieurs méthodes en vain.

Je suis ce tutoriel: https://javebratt.com/ionic-firebase-tutorial-auth/

J'ai aussi essayé

--background: #fff url ('../../ assets / images / cover.jpg') no-repeat center center / cover; }

Toute aide serait grandement appréciée. J'utilise Ionic 4

<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 &&
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid &&
       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'].valid&& loginForm.controls['password'].touched"
    >
    </ion-input>
    </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      && 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>

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;
  }
}
}

html css ionic-framework ionic4

2 commentaires

Le chemin de l'image est-il correct? Avez-vous une erreur dans la console comme impossible d'obtenir l'image?

Oui c'est correct. Quand je le modifie de toute façon, c'est quand j'obtiens une erreur de console.

5 Réponses :

0
votes

Essayons ces étapes et voyons comment cela se passe:

Vous pouvez sélectionner le contenu ionique directement dans votre CSS au lieu de créer une autre classe CSS. Je suppose que vous avez besoin d'une image d'arrière-plan pour une page. Alors saisissez toute la page par élément ion-content . Ensuite, utilisez les propriétés CSS habituelles pour un arrière-plan d'élément. Mais lorsque vous utilisez Ionic, assurez-vous que les chemins relatifs sont de forme incorrecte. Par exemple, je pense que le chemin de vos actifs (image) n'est pas correct. C'est pourquoi ionic ne peut pas le rendre / le trouver sur l'appareil. L'extrait de code que je donne ci-dessous fonctionne pour moi.

 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;
     }

2 commentaires

Cela n'a pas fonctionné non plus. Je suis à peu près sûr que le chemin relatif est correct car je l'ai un peu changé et j'ai reçu des erreurs lorsque l'image n'était pas accessible.

Heureux de savoir que vous avez trouvé votre solution.

0
votes

Cela a fonctionné

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

0 commentaires

6
votes

Si vous avez besoin de plus de contrôle, définissez d'abord la variable css --background sur none, puis spécifiez les propriétés css habituelles:

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

0 commentaires

2
votes

Cela a fonctionné dans un navigateur et un appareil réel à la fois:

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

N'utilisez pas le chemin ../../../assets pour l'image car il ne fonctionne pas sur un appareil réel. p>

0 commentaires

0
votes

J'ai testé sous Android. Cela fonctionne bien pour moi.

SCSS:

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

0 commentaires