Пример stackblitz для ngStyle background-image не успешно отображает изображение в DOM

Question

Моя цель - предоставить динамическое изображение путем привязки к атрибуту background-image. Вот Stackblitz , иллюстрирующий текущее состояние проблемы.

Как видите ...

Я пытался санировать строку, которую я подаю, в стиле элемента.

Я убедился, что мой синтаксис, не делая его динамическим, правильный.

Я проверил похожие проблемы, но они все еще были слишком разными, чтобы их можно было использовать: ngStyle background-image даже пост Гюнтера не помог: Угловой 2 ngStyle и background-image

Вот фоновое изображение:

.background-image{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg");

Я просто хочу поместить эту строку после background-image в компоненте так:

public imgSmall = 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg")';

так что я могу изменить его на более высокое разрешение, когда не на мобильном телефоне.

Мне нужно в этом формате, в отличие от <img src> формата

Answer 1

Я бы подумал сделать это немного по-другому, как здесь, в раздвоенной версии вашего StackBlitz

Мы поставляем оверлей градиента с изолированным псевдоклассом :after, поэтому он не передаетсявокруг все время и статичны для облегчения обслуживания и уменьшения вздутия.Также позволяет вам хранить URL-адреса в виде строки вместо целых url("blah/blah"), так что вы могли бы сказать, что вы можете просто сгенерировать массив URL-адресов и т. Д. Вам также не нужно вызывать sanitize или другие избыточные процессы.

В любом случаенадеюсь это поможет.Ура!