Динамическое фоновое изображение не работает - 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;

Проблема в том, что если пользователь загружает одни и те же изображения, я получаю URL-адрес примерно так:

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

с (1) в скобках, и я предполагаю, что CSS не работает с этим, все другие изображения отображаются, но только копии с этим типом пути не.

Работает с тегом img, но не с фоновым свойством в css.

Кто-нибудь знает, что не так?

Answer 1

Нашли решение.

Фоновое изображение не допускает (), пробел, одинарные и двойные кавычки в пути изображения.

Answer 2

Вы можете добавить height и width из section тега.

Я создал демо на Stackblitz

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