ngStyle not setting bg-image when filename has special characters

Question

I've got an image coming back from an API that has some special characters:

e.g. http://... /$(KGrHqR,!lIE8MU(kS7cBPL!Eccsjg~~60_1.JPG

If I add the image manually, via dev tools, it loads fine.

However, when doing something like:

<div ng-style="{'background-image':'url(' + item.image + ')'}"></div>

The property never gets set.

Is it safe to assume then that ngStyle is looking for special chars in the filename, and if it finds any, it dumps it?

If so, what options do I have in getting it to work?

Answer 1

Is it safe to assume then that ngStyle is looking for special chars in the filename, and if it finds any, it dumps it?

Yes.

If your URL contains special character, you may want to wrap it between quotes. Note this synthax is even simpler:

<div ng-style="{'background-image':'url(\'{{item.image}}\')'}"></div>

Using your, it would be:

<div ng-style="{'background-image':'url(\'' + item.image + \'')'}"></div>