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

Posted 2023-03-05

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

【英文标题】：In Angular 7, I can't display a dynamic image as [style.background-image]

【发布时间】：2019-11-15 12:13:28

【问题描述】：

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

显示图片不是问题。

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

我的 Angular 版本是 7.3.8。

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

布局 - 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(....)'

但没有任何效果。

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

谢谢帮助！

【问题讨论】：

检查这个：***.com/q/34875426/2050306

我已经试过了：/

也许你应该提供一个 plunkr ...

【参考方案1】：

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

【讨论】：

可能元素没有大小？