动态背景图像不起作用 - Angular 5答案

【问题标题】：Dynamic background image not working - Angular 5动态背景图像不起作用 - Angular 5
【发布时间】：2018-07-04 10:34:43
【问题描述】：

我正在使用 ngStyle 设置背景图片，如下所示：

<section [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

在 .ts 文件中：

this.backgroundUrl = this.homeModelResponse.featuredStories[0].fullHDUrl;

问题是，如果用户上传相同的图片，我会得到这样的网址：

https://..something/264/2970/7745/9960/rawpixel-com-256641_(1)_org_hd_ready.jpg.jpg

(1) 在括号中，我的猜测是 css 不能很好地处理它，所有其他图像都会显示，但只有具有这种类型路径的副本不是。

它适用于 img 标签，但不适用于 css 中的背景属性。

有谁知道怎么回事？

【问题讨论】：

标签： css angular

【解决方案1】：

找到了解决办法。

背景图片不允许在图片路径中有()、空格、单引号和双引号。

【讨论】：

【解决方案2】：

您可以添加height 和width 的section 标签。

我在Stackblitz创建了一个演示

<section style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

【讨论】：