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

Я пытаюсь использовать динамический путь изображения в качестве фонового изображения в одном из моих проектов 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.

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

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


javascript angular angular7 encodeuricomponent
person Gaurav Janoti    schedule 17.12.2018    source источник
comment
Не могли бы вы предоставить демо в StackBlitz. Я не уверен, что я все правильно понимаю. Какие файлы не работают, а какие? Есть образец? Скобки не должны особо беспокоить угловые   -  person Joniras    schedule 18.12.2018
comment
@Joniras это решено сейчас .. вы можете проверить ниже решение, которое работает для меня.   -  person Gaurav Janoti    schedule 28.12.2018

Ответы (1)


arrow_upward
5
arrow_downward

  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

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

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

person Ashish Singh Rawat    schedule 19.12.2018
comment
право .. escape() устарел, и encodeURI() может угробить вас несколькими специальными символами, поэтому лучше сделать путь к изображению строкой. - person Gaurav Janoti; 28.12.2018