ngStyle背景图片

Question

我有以下问题。我有一个具有@Input字符串值的组件，它是图像的链接。

在我的HTML文件中，我有：

<div class="parallax" [ngStyle]="{'background-image': 'url({{parallaxImage}})'}"></div>

但它显然不起作用（有一个错误，页面根本没有呈现）。我应该用什么语法来实现我的目标？我也尝试将其包装成函数：

.ts文件

  getParallaxImage(){
    return "'url(" + this.parallaxImage + ")'";
  }

.html文件

<div class="parallax" [ngStyle]="{'background-image': getParallaxImage()}"></div>

现在，页面已渲染，但未设置背景图像。

Answer 1

试试这个

 getParallaxImage(){
    return "url(" + this.parallaxImage + ")";
  }

或

{{1}}

这两种解决方案现在都可以使用，根据您的要求使用。

Answer 2

这也应该有效：

[style.background-image]="'url(' + parallaxImage + ')'"