时间戳

首页 > 解决方案 > ngStyle 背景图片

html - ngStyle 背景图片

问题描述

我有以下问题。我有一个具有@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>

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

标签： htmlangular

解决方案

尝试这个

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

或者

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

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

推荐阅读