AngularJS and IE issue

Question

I have the following code that shows the user avatar:

<div class="dashboard_image" style="background-image:url({{(user.avatar!=null)?user.avatar:'/img/general_user.svg'}})" style="width:200px;height:200px"></div>

If user do not have any image, user.avatar comes null.

In Chrome works fine but not in IE 11. What's wrong?

Have u checked that if your html document is properly rendered (whether the style of that element holds the right value)?After reading your comments, I doubt your issue may be not at the angular side but have something to do with the SVG display problem in IE 11. — MMhunter
– MMhunter, Commented Aug 9, 2016 at 12:41
@MMhunter I thought so but in header, the SVG is shown perfectly. That's the strange thing! — domoindal
– domoindal, Commented Aug 9, 2016 at 16:30

Zdenek Hatak · Accepted Answer · 2016-08-09 11:52:26Z

3

Try using ng-style, which exists for this purpose.

https://docs.angularjs.org/api/ng/directive/ngStyle

<div
    class="dashboard_image"
    style="width:200px;height:200px"

    ng-style="{
        backgroundImage: 'url(' + (user.avatar!=null ? user.avatar : '/img/general_user.svg') + ')'
    }">
</div>

(not tested)

edited Aug 9, 2016 at 11:52

answered Aug 9, 2016 at 11:32

Zdenek Hatak

1,14514 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

domoindal Over a year ago

It arises an error: angular.js:13550 Error: [$parse:syntax] errors.angularjs.org/1.5.5/$parse/……_user.svg%20%2B%20')'%20%7D&p4=%2Fimg%2Fgeneral_user.svg%20%2B%20')'%20%7D

Duncan Over a year ago

Lose the {{ and }} curly braces from the ng-style expression: { backgroundImage: 'url(' + (user.avatar!=null) ? user.avatar : '/img/general_user.svg)' }

domoindal Over a year ago

Now error free but do not show the image in neither case.

domoindal Over a year ago

I changed it a little: ng-style="{ 'background-image': 'url(' + (user.avatar!=null ? user.avatar : '/img/general_user.svg') + ')' }". Now it works.

Zdenek Hatak Over a year ago

I altered it even further. Like I said - I did not test it and obviously it was a mistake :))

|

Jarri · Accepted Answer · 2016-08-09 11:49:02Z

0

You should do something like this:

<div class="dashboard_image" ng-style="{'background-image': user.avatar!=null ? 'url(user.avatar)' : 'url(/img/general_user.svg)'" style="width:200px;height:200px"></div>

answered Aug 9, 2016 at 11:49

Jarri

1

1 Comment

domoindal Over a year ago

The main issue still remains. In case there is no avatar, the default image is not shown in IE11, but in Chrome yes.

Collectives™ on Stack Overflow

AngularJS and IE issue

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related