NgStyle (angular2) का उपयोग करके पृष्ठभूमि-छवि कैसे जोड़ें?

103

बैकग्राउंड-इमेज को जोड़ने के लिए ngStyle का उपयोग कैसे करें? मेरा कोड काम नहीं करता है:

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

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

— इग्नाट
स्रोत

आप कोष्ठक विशेषता पर कोष्ठक का उपयोग क्यों करते हैं?

— गैल

यह भी देखें stackoverflow.com/questions/37076867/... RC.1 में एक संबंधित समस्या के बारे में

— गुंटर Zöchbauer

231

मुझे लगता है कि आप यह कोशिश कर सकते हैं:

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

आपकी ngStyleअभिव्यक्ति को पढ़ने से , मुझे लगता है कि आपने कुछ "" याद किया ...

— थियरी टेम्पलियर
स्रोत

का परीक्षण किया। RC.1 के साथ काम करना। RC.2 के लिए इसकी आवश्यकता नहीं होनी चाहिए और वे जो कहते हैं

— Lucio Mollinedo

4

मैं पसंद करता हूं this.photo = `url(${photo})`; [style.background-image]='photo'।

— स्लाइड शो 2

4

ध्यान रखें कि चित्र URL (चित्र नाम) में रिक्त स्थान एक मूक [ngStyle]और [style.background-image]प्रतिपादन विफलता का कारण हो सकता है ।

— vulp

83

इसके अलावा आप यह कोशिश कर सकते हैं:

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

— Todmy
स्रोत

3

@ redfox05 मुझे लगता है कि अंजीर एक सिंथेटिक चीनी है। मुख्य अंतर यह है कि ngStyle आपको कई सीएसएस नियम लागू करने की अनुमति देता है, लेकिन [शैली। <css_prop>] आपको एक ही अनुमति देता है। अगले समतुल्य हैं: <div [ngStyle]="{ color: 'red', 'font-size': '22px' }">First</div> और <div [style.color]="'red'" [style.font-size.px]="22">Second</div>

— टोडी

मैंने इस [style.css] दृष्टिकोण का उपयोग किया है, हालांकि मुझे काम करने के लिए [style.background-repeat] नहीं मिल सकता है, आप जानते हैं क्यों?

— एंडर्स मेटनिक

इस दृष्टिकोण का उपयोग करके सशर्त स्टाइल कैसे करें? मान लीजिए कि क्या मैं जांचना चाहता हूं कि क्या फोटो अशक्त नहीं है और केवल इस शैली को लागू करें?

— पंकज

25

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>

यह सभी देखें

— गुंटर ज़ोचबॉयर
स्रोत

6

ऐसा लगता है कि आपकी शैली को सैनिटाइज़ कर दिया गया है, डोमसैनिटाइज़र से बायपास सिक्योरिटी ट्राइस्टाइल विधि का उपयोग करने की कोशिश करें।

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

export class MyComponent implements OnInit {

  public backgroundImg: SafeStyle;
  @Input() myObject: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
     this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')');
  }

}

<div *ngIf="backgroundImg.length > 0" [style.background-image]="backgroundImg"></div>

स्निपेट का विस्तार करें

— उलियाना पावेलको
स्रोत

6

इसके बजाय का उपयोग करें

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

— विजय चौहान
स्रोत

3

मेरी पृष्ठभूमि छवि काम नहीं कर रही थी क्योंकि URL में एक जगह थी और इस प्रकार मुझे URL की आवश्यकता थी।

आप यह जाँच सकते हैं कि क्या यह समस्या है जो आप एक अलग छवि URL की कोशिश कर रहे हैं जिसमें ऐसे अक्षर नहीं हैं जिनसे बचने की आवश्यकता है।

आप केवल एनकोडर्इ () में निर्मित Javascripts का उपयोग करते हुए घटक में डेटा के लिए कर सकते हैं विधि ।

व्यक्तिगत रूप से मैं इसके लिए एक पाइप बनाना चाहता था ताकि इसका उपयोग टेम्पलेट में किया जा सके।

ऐसा करने के लिए आप एक बहुत ही सरल पाइप बना सकते हैं। उदाहरण के लिए:

src / ऐप्स / पाइप / एनकोड-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.module.ts

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

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

export class AppModule { }

src / ऐप्स / 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.component.html

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

— टॉम बेयन
स्रोत

0

आप 2 विधियों का उपयोग कर सकते हैं:

विधि 1

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

विधि 2

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

नोट: URL को " char " से घेरना महत्वपूर्ण है ।

— riofly
स्रोत

0

अधिकतर चित्र इसलिए प्रदर्शित नहीं होते हैं क्योंकि आपके URL में स्थान होते हैं। आपके मामले में आपने लगभग सब कुछ सही किया। एक बात को छोड़कर - यदि आपने css I में बैकग्राउंड-इमेज निर्दिष्ट किया है, तो आपने एक भी उद्धरण नहीं जोड़ा है

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

ऐसा करने के लिए HTML में quot चरित्र से बचकर निकलें '

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

— बस अच्छा है
स्रोत

0

मेरा समाधान, if..else स्टेटमेंट का उपयोग करते हुए। यह हमेशा एक अच्छा अभ्यास है यदि आप अनावश्यक कुंठाओं से बचना चाहते हैं, तो यह जांचने के लिए कि आपका चर मौजूद है और सेट है। अन्यथा, मामले में एक बैकअप छवि प्रदान करें; आप कई शैली गुणों को भी निर्दिष्ट कर सकते हैं, जैसे background-position: center, आदि।

<div [ngStyle]="{'background-image': this.photo ? 'url(' + this.photo + ')' : 'https://placehold.it/70x70', 'background-position': 'center' }"></div>

स्निपेट का विस्तार करें

— AllJs
स्रोत