Не могу установить фоновое изображение (с градиентом) в Angular 9 - PullRequest
Новая
       36

Не могу установить фоновое изображение (с градиентом) в Angular 9

0 голосов
/ 30 апреля 2020

Как видно из названия, я не могу установить это фоновое изображение. Я перепробовал несколько способов. В настоящее время у меня есть это в моем коде: 

export class HeroComponent implements OnInit {
  @Input() content: PageContent[];

  public backgroundImage: string;

  constructor() { }

  ngOnInit(): void {
    this.getComponent()
  }

  private getComponent(): void {
    this.content.forEach((component: PageContent) => {
      if (component.type !== 'hero') return;
      let url = component.fields.backgroundImage.fields.file.url;
      this.backgroundImage = `linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${url}');`;
      console.log(component.fields.backgroundImage.fields)
      console.log(this.backgroundImage);
    })
  }
}

console.log возвращает это:

линейный градиент (снизу, rgba (0, 0, 0, 0.5), rgba (0, 0, 0.5)), URL

что верно. И мой html пытается это сделать: 

<div class="jumbotron" [ngStyle]="{ 'background-image': backgroundImage }" *ngIf="backgroundImage">

Элемент отображается, поэтому есть фоновое изображение, но оно не работает. Кроме того, я попытался: 

<div class="jumbotron" [style.background]="backgroundImage" *ngIf="backgroundImage">

Дело в том, если я скопирую строку и вставлю ее в свой css, например: 

.jumbotron {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('//images.ctfassets.net/90y01jqko4hp/15dPFmnMsX64iOL15WJIVR/457c906c79652365ff749ea2d5d11856/default-bg.jpg');
}

, который работает без каких-либо проблем. Кто-нибудь знает, что я делаю не так?

1 Ответ

1 голос
/ 30 апреля 2020

Я думаю, что проблема в том, в конце строки. Демо

это дает результат 

  backgroundImage="linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('//images.ctfassets.net/90y01jqko4hp/15dPFmnMsX64iOL15WJIVR/457c906c79652365ff749ea2d5d11856/default-bg.jpg')"

, но это не 

backgroundImage="linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('//images.ctfassets.net/90y01jqko4hp/15dPFmnMsX64iOL15WJIVR/457c906c79652365ff749ea2d5d11856/default-bg.jpg');"
...