Cum se adaugă imaginea de fundal folosind ngStyle (angular2)? (Programare, Javascript, Html, Css, Angular)

Ignat a intrebat.

Cum să folosesc ngStyle pentru a adăuga background-image?Codul meu nu funcționează:

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

<div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

Comentarii

  • de ce se folosesc parantezele la atributul ngStyle? –  > Por gal.
  • Vezi și stackoverflow.com/questions/37076867/… despre o problemă conexă în RC.1 –  > Por Günter Zöchbauer.
9 răspunsuri
Thierry Templier

Cred că ați putea încerca acest lucru:

<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>

Din citirea informațiilor dvs. ngStyle expresie, cred că ați ratat câteva „‘”…

Comentarii

  • Testat. Funcționează cu RC.1. Nu ar trebui să fie necesar pentru RC.2 și versiunile mai noi, conform celor spuse aici –  > Por Lucio Mollinedo.
  • Eu prefer this.photo = `url(${photo})`; [style.background-image]='photo'. –  > Por slideshowp2.
  • Rețineți că spațiile din URL-ul imaginii (numele imaginii) pot provoca o eroare de silențiositate. [ngStyle] și [style.background-image] eșec de redare. –  > Por vulp.
  • Acest lucru este bun. L-am folosit o dată și funcționează bine. Bună treabă –  > Por BeardedPrince.
Todmy

De asemenea, puteți încerca asta:

[style.background-image]="'url(' + photo + ')'"

Comentarii

  • @redfox05 Presupun că ngStyle este un zahăr sintactic. Principala diferență este că ngStyle îți permite să aplici mai multe reguli css, dar [style.<css_prop>] permite doar una singură. Următoarele sunt echivalente: <div [ngStyle]="{ color: 'red', 'font-size': '22px' }">First</div> și <div [style.color]="'red'" [style.font-size.px]="22">Second</div> –  > Por Todmy.
  • Am folosit această abordare [style.css], deși nu reușesc să fac să funcționeze [style.background-repeat], știți de ce? –  > Por Anders Metnik.
  • Cum se face stilizarea condiționată folosind această abordare? Să zicem dacă vreau să verific dacă fotografia nu este nulă și apoi să aplic doar acest stil? –  > Por Pankaj.
Günter Zöchbauer
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

  constructor(private sanitizer:DomSanitizer) {
    this.name = 'Angular!'
    this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(http://www.freephotos.se/images/photos_medium/white-flower-4.jpg)');
  }
<div [style.background-image]="backgroundImg"></div>

Vedeți și

Uliana Pavelko

Se pare că stilul dvs. a fost dezinfectat, pentru a-l ocoli încercați să utilizați metoda bypassSecurityTrustStyle din DomSanitizer.

Vijay Chauhan

Utilizați în schimb

[ngStyle]="{'background-image':' url(' + instagram?.image + ')'}"

Tom Benyon

Imaginea mea de fundal nu funcționa pentru că URL-ul avea un spațiu în el și, prin urmare, trebuia să o codific prin URL.

Puteți verifica dacă aceasta este problema pe care o aveți încercând o altă adresă URL a imaginii care nu are caractere care trebuie să fie scăpate.

Ați putea face acest lucru pentru datele din componentă folosind doar Javascripts încorporate în componentă encodeURI() (în care este inclusă).

Personal, am vrut să creez o conductă pentru aceasta, astfel încât să poată fi utilizată în șablon.

Pentru a face acest lucru, puteți crea o țeavă foarte simplă.De exemplu:

src/app/pipes/encode-uri.pipe.ts

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

@Pipe({
  name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);
  }
}

src/app/app/app.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

src/app/app/app.component.ts

import {Component} from '@angular/core';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space init.com';
  }
}

src/app/app/app.component.html

<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>

riofly

Puteți utiliza 2 metode:

Metoda 1

<div [ngStyle]="{'background-image': 'url(&quot;' + photo + '&quot;)'}"></div>

Metoda 2

<div [style.background-image]="'url(&quot;' + photo + '&quot;)'"></div>

Notă: este important să înconjurați URL-ul cu char.

pur și simplu bun

De cele mai multe ori, imaginea nu este afișată deoarece URL-ul conține spații. În cazul dvs. ați făcut aproape totul corect. Cu excepția unui singur lucru – nu ați adăugat ghilimele simple, așa cum faceți dacă specificați background-image în cssI.e.

.bg-img {                /          /
    background-image: url('http://...');
}

Pentru a face acest lucru, scăpați caracterul quot în HTML prin ”.

                                          /                                  /
<div [ngStyle]="{'background-image': 'url(''+ item.color.catalogImageLink + '')'}"></div>

AllJs

Soluția mea, folosind declarația if..else. Este întotdeauna o bună practică, dacă doriți să evitați frustrări inutile, să verificați dacă variabila dvs. există și este setată. În caz contrar, furnizați o imagine de rezervă în caz că; De asemenea, puteți specifica mai multe proprietăți de stil, cum ar fi background-position: center, , etc.