在 Angular 7 中，我无法将动态图像显示为 [style.background-image]

Question

在我的 Angular 应用程序中，我从后端加载动态背景图像。

显示图片不是问题。

背景图片未加载，遗憾的是我没有收到错误消息。

我的 Angular 版本是 7.3.8。

我尝试了一些来自 stackoverflow 和网络的解决方案，但没有任何帮助

布局 - html：

  <div *ngIf="headerImage" [style.background-image]="headerImage">

布局-组件：

  ngOnInit() {<br/>
      this.setup = this.route.snapshot.data['setup'];
      this.createHeader(this.setup)
    }

   createHeader(setup: Setup){
      const tempImage = 'data:image/png;base64,' + this.setup.headerImage.data;
      this.headerImage = this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + tempImage + ')');
      console.log(this.headerImage);
      }

我的控制台的输出：

  this.headerImage console.log: url(data:image/png;base64,iVBORw0KGgo.......

我试过了

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

还有这个

   this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(....)'

但没有任何效果。

我不知道，会发生什么？我没有收到错误消息并且显示图像不是问题...但我需要背景。

谢谢帮助！

Answer 1

看起来你做的一切都是正确的，你应该尝试确保没有可能导致问题的外部因素，也许元素没有大小？你试过不同的图像吗？您是否尝试过设置background: url(...) 而不是backround-image: url(...)。请记住，css 样式继承可能会覆盖您的内容。