javascript - Angular ng-style background image when url contain spaces - Stack Overflow

admin管理员组

文章数量:1291122

I'm trying to apply a background image to a div by using the angular ng-style and it works fine as long as the URL does not contain spaces.

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

When there is space in URL like parentIMGLink = servername.images/there is name.png it does not work. On the other hand:

img ng-src={{parentIMGLink }}

Works fine. For sure I can manage so that names on the server wont contain spaces but is there any possibility to make ng-style work?

I'm trying to apply a background image to a div by using the angular ng-style and it works fine as long as the URL does not contain spaces.

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

When there is space in URL like parentIMGLink = servername.images/there is name.png it does not work. On the other hand:

img ng-src={{parentIMGLink }}

Works fine. For sure I can manage so that names on the server wont contain spaces but is there any possibility to make ng-style work?

• javascript
• css
• angularjs

Share Improve this question Follow asked Jun 15, 2015 at 8:03 sniegomansniegoman 5922 silver badges66 bronze badges 2

• what do you mean by does not work ? – Hacketo Commented Jun 15, 2015 at 8:11
• @Hacketo Probably that it won't find the image... – Gustaf Gunér Commented Jun 15, 2015 at 8:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Just like in css you have to wrap your 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}}\')'}">

You can try this. In JS, replace " " with %20 (Percent-encoded space).

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

本文标签： javascriptAngular ngstyle background image when url contain spacesStack Overflow