Question

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

显示图片不是问题。

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

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

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

1 个答案: