web-dev-qa-db-fra.com

Comment définir Angular 4 image de fond?

J'essaie les lignes suivantes pour définir l'image d'arrière-plan. Mais cela ne fonctionne pas. quels sont les moyens mis en arrière-plan constamment dans mon application.

app.component.html

<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
    <router-outlet></router-outlet>
    <alert></alert>
</div>
javascriptangular
14
Manihtraa

Vous pouvez utiliser ngStyle pour définir l’arrière-plan d’une div

<div [ngStyle]="{background: 'url(./images/' + trls.img + ')'}"></div>

ou vous pouvez également utiliser le style d'arrière-plan intégré:

<div [style.background]="'url(/images/' + trls.img + ')'"></div>
27
Akash Agrawal

Cela fonctionne pour moi:

mettez ceci dans votre balisage:

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

puis en composant:

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}
19
Richard Strickland

La réponse ci-dessous a fonctionné pour angular 4/5.

Dans app.component.css

.image{
     height:40em; background-size:cover; width:auto;
     background-image:url('copied image address');
     background-position:50% 50%;
   }

Également dans app.component.html, ajoutez simplement ce qui suit

<div class="image">
Your content
</div>

De cette façon, j'ai pu définir l’image d’arrière-plan dans Angular 4/5.

2
Sachin Hatikankan

Si vous prévoyez d'utiliser beaucoup d'images d'arrière-plan tout au long de votre projet, vous trouverez peut-être utile de créer un tuyau personnalisé très simple qui créera l'URL pour vous.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'asUrl'
})
export class BackgroundUrlPipe implements PipeTransform {

  transform(value: string): string {
    return `url(./images/${value})`
  }

}

Ensuite, vous pouvez ajouter des images d’arrière-plan sans toute la concaténation de chaînes.

<div [ngStyle]="{ background: trls.img | asUrl }"></div>
0
marcus brincat

Je voulais une photo de profil de taille 96x96 avec les données de api. La solution suivante a fonctionné pour moi dans le projet Angular 7.

.ts:

  @Input() profile;

.html:

 <span class="avatar" [ngStyle]="{'background-image': 'url('+ profile?.public_picture +')'}"></span>

.scss:

 .avatar {
      border-radius: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      width: 96px;
      height: 96px;
    }

Veuillez noter que si vous écrivez background au lieu de 'background-image' Dans [ngStyle], Les styles que vous écrivez (même dans style d'élément) pour d'autres propriétés d'arrière-plan, telles que background -position/taille, etc. ne fonctionnera pas. Parce que vous allez déjà corriger ses propriétés avec background: 'url(+ property +) (no providers for size, position, etc. !)'. La priorité [ngStyle] Est supérieure à style d'élément. Dans background ici, seule la propriété url () fonctionnera. Veillez à utiliser 'background-image' Au lieu de 'background' Si vous voulez écrire plus de propriétés dans l'image d'arrière-plan.

0
Nodirabegimxonoyim

celui-ci fonctionne pour moi aussi pour Internet Explorer:

<div class="col imagebox" [ngStyle]="bkUrl"></div>

...

@Input() background = '571x450img';  
bkUrl = {};   
ngOnInit() {
    this.bkUrl = this.getBkUrl();
  }
getBkUrl() {
    const styles = {
      'background-image': 'url(src/assets/images/' + this.background + '.jpg)'
    };
    console.log(styles);
    return styles;
  }
0
netalex

En HTML 

<div [style.background]="background"></div>

Dans TypeScript 

this.background= 
this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);

Une solution de travail.

Quelle est la méthode recommandée pour définir de manière dynamique l’image d’arrière-plan dans Angular 4

0
Mark Macneil Bikeio