Angular ng style image when url contains spaces

Question

I am trying to apply a background image to a div using angular ng-style

and it works fine as long as the url contains no spaces.

ng-style="{'background-image': 'url(' + parentIMGLink + ')'}"

When there is a space in the url, for example parentIMGLink = servername.images/there is name.png

, it doesn't work. On the other hand:

img ng-src={{parentIMGLink }}

Works great. Of course, I can manage so that the names on the server do not contain spaces, but is there a way to do the ng-style work?

+3

sniegoman June 15. 15 at 8:03

2 answers

epignosisx · Answer 1 · 2015-10-29T20:22:05+0000

As with css, you have to wrap the image url in quotes:

.rule{ background-image: url('/some/image url.png') }

You have to do the same here:

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

Gustaf gunér · Answer 2 · 2015-06-15T08:10:45+0000

You can try this. In JS, replace "" with% 20 (Proportional Space).

parentIMGLink = parentIMGLink.replace(" ", "%20");