动态背景图片不起作用-Angular 5

Question

我正在使用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中的背景属性一起使用。

有人知道怎么了吗？

Answer 1

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

我已经在Stackblitz上创建了一个演示

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

Answer 2

找到了解决方案。

背景图像在图像路径中不允许使用（），空格，单引号和双引号。