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

Question

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

显示图片不是问题。

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

我的 Angular 版本是 7.3.8。

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

布局 - 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 样式继承可能会覆盖您的内容。

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

In Angular 7, I can't display a dynamic image as [style.background-image]

background-image

typescript

angular

angular7