Angular 拒绝设置我的背景

Question

我正在尝试设置我的页面的背景。无论我尝试什么，它都无法加载。

这是我的页面：

<div class="container" [ngStyle]="{'background-image': getUrl()}">
  <div class="col-4 justify-content-end">
    <button (click)="onLogin()" class="btn btn-success">login</button>
  </div>
</div>

这是 ts 文件：

/*
*  Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
*  See LICENSE in the source repository root for complete license information.
*/

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

import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  constructor(private authService: AuthService) {}

  onLogin() {
    this.authService.login();
  }

  getUrl() {
    return "url('https://www.pxl.be/Assets/website/pxl_algemeen/afbeeldingen/pxl_beeld_geselecteerd.jpg')";
  }
}

有人知道吗？提前致谢！

Answer 1

它按预期工作，这里唯一的问题是 div 的 height，您也可以使用 background-size

WORKING DEMO

Answer 2

Angular 不会让你不小心给你的应用程序注入漏洞。您需要先清理 CSS：

constructor(private sanitizer: DomSanitizer) {}
getUrl() {
  return this.sanitizer.bypassSecurityTrustStyle(url('https://www.pxl.be/Assets/website/pxl_algemeen/afbeeldingen/pxl_beeld_geselecteerd.jpg')";
}

Angular 拒绝设置我的背景

Angular refuses to set my background

background-image

ng-style

angular