এনজিস্টাইল (কৌণিক 2) ব্যবহার করে পটভূমি-চিত্রটি কীভাবে যুক্ত করবেন?

Question 1

পটভূমি-চিত্র যুক্ত করতে কীভাবে এনজিস্টাইল ব্যবহার করবেন? আমার কোড কাজ করে না:

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

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

Question 2

আমি মনে করি আপনি এটি চেষ্টা করতে পারেন:

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

আপনার ngStyleঅভিব্যক্তি পড়া থেকে , আমি অনুমান করি যে আপনি কিছু "" "মিস করেছেন ...

Question 3

এছাড়াও আপনি এটি চেষ্টা করতে পারেন:

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

Question 4

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>

আরো দেখুন

Question 5

দেখে মনে হচ্ছে আপনার স্টাইলটি স্যানিটাইজ করা হয়েছে, এটিকে বাইপাস করার জন্য ডোমসানাইটিজার থেকে বাইপাস সিকিউরিটি ট্রাস্টস্টাইল পদ্ধতিটি ব্যবহার করার চেষ্টা করুন।

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>

স্নিপেট প্রসারিত করুন

Question 6

পরিবর্তে ব্যবহার করুন

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

Question 7

আমার ব্যাকগ্রাউন্ড চিত্রটি কাজ করছে না কারণ URL টির মধ্যে একটি স্পেস ছিল এবং তাই ইউআরএলটি এটি এনকোড করা দরকার।

আপনি আলাদা ইমেজ ইউআরএল চেষ্টা করে পরীক্ষা করতে পারেন যে অক্ষর নেই যার পালানোর দরকার নেই trying

আপনি কেবল এনকোডুরি () পদ্ধতিতে নির্মিত জাভাস্ক্রিপ্ট ব্যবহার করে উপাদানটির ডেটাতে এটি করতে পারেন ।

ব্যক্তিগতভাবে আমি এটির জন্য একটি পাইপ তৈরি করতে চেয়েছিলাম যাতে এটি টেমপ্লেটে ব্যবহার করা যায়।

এটি করতে আপনি খুব সাধারণ পাইপ তৈরি করতে পারেন। উদাহরণ স্বরূপ:

src / app / পাইপ / এনকোড-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.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.componal.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.componal.html

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

Question 8

আপনি 2 টি পদ্ধতি ব্যবহার করতে পারেন:

পদ্ধতি 1

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

পদ্ধতি 2

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

দ্রষ্টব্য: " চরের সাথে ইউআরএল ঘিরে রাখা গুরুত্বপূর্ণ ।

Question 9

বেশিরভাগ চিত্রটি প্রদর্শিত হয় না কারণ আপনার ইউআরএলটিতে স্পেস রয়েছে। আপনার ক্ষেত্রে আপনি প্রায় সবকিছু সঠিকভাবে করেছেন। একটি জিনিস ব্যতীত - আপনি যদি সিএস আইতে পটভূমি-চিত্রটি নির্দিষ্ট করেন তবে আপনার মতো একক উদ্ধৃতি যোগ করা হয়নি

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

এটি করতে HTML 'এর মাধ্যমে এইচটিএমএল-এ উদ্ধৃতি অক্ষরটি এড়িয়ে চলুন

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

Question 10

আমার সমাধান, if..else স্টেটমেন্ট ব্যবহার করে। আপনার চলকটি বিদ্যমান এবং সেট রয়েছে কিনা তা পরীক্ষা করতে আপনি অপ্রয়োজনীয় হতাশা এড়াতে চান তবে সর্বদা এটি একটি ভাল অনুশীলন। অন্যথায়, ক্ষেত্রে ব্যাকআপ চিত্র সরবরাহ করুন; আপনি একাধিক শৈলীর বৈশিষ্ট্য background-position: center, ইত্যাদি উল্লেখ করতে পারেন

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

স্নিপেট প্রসারিত করুন