dynamic image path not showing in [style.background-image] property in Angular 7

Question

I am trying to use dynamic image path as background image in one of my Angular6 project. I have tried using [style.background-image] & [style.background] even encodeURI to fix spaces in path also tried using *ngIF so that it renders after getting loaded.

Case 1:

imgPath is the absolute path, to which I am appending the path from JSON data.

HTML code

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

Component

Checking images for spaces and other bracket using encodeURI() function

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

Output

Image comparison of article

As seen in the picture "s/Absorica%20(2).png" is having brackets, which might be causing the bug but not sure though.

Other cases

I have tried with [style.background] , [ngStyle] , changing image tag to div tag.

But i am not able to understand why few of the images are rendering and few are not rendering, though path is getting generated correctly, which I have confirmed by opening them in new tab.

Any help will be highly appreciated

Answer 1

1. In background-image: url accepts the string. You have to add your image path to a string.

"'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

2. Try using escape() method but this method has been deprecated. Careful using this.

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