динамический путь к изображению не отображается в свойстве [style.background-image] в Angular 7

Question

Я пытаюсь использовать динамический путь изображения в качестве фонового изображения в одном из моих проектов Angular6.Я пытался использовать [style.background-image] & [style.background] даже encodeURI для исправления пробелов в пути, также пытался использовать * ngIF, чтобы он отображался после загрузки.

Случай 1:

imgPath - это абсолютный путь, к которому я добавляю путь из данных JSON.

HTML-код

    <a routerLink="/article/{{news.id}}">        
      <img [style.background-image]="'url(' + imgPath + news.encodedImage.encocoded_primary_image + ')'">          
    </a>

Компонент

Проверка изображений для пробелов и других скобок с помощью функции encodeURI ()

'encocoded_primary_image': encodeURI(res['primary_image']['file_path'])

Вывод

Сравнение изображений артикула

Как видно из рисунка, "s / Absorica% 20 (2) .png" содержит скобки, которые могут быть причиной ошибки, но не уверены.

Другие случаи

Я пробовал с [style.background], [ngStyle], меняя тег изображения на тег div.

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

Любая помощь будет высоко оценена

Answer 1

1. В background-image: url принимает строку.Вы должны добавить свой путь к изображению в строку.

"'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'"

<a routerLink="/article/{{news.id}}">
  <img [style.background-image]="'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'">
</a>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

https://www.w3schools.com/csSref/pr_background-image.asp

Попробуйте использовать метод escape (), но этот метод устарел.Осторожно используйте это.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape