AngularJS doesn't update img src when model changes

Question

I use ng-src to load images. Value is loaded from some scope variable, like this:

<img ng-src="{{currentReceipt.image}}"/>

My issue is that when I run delete $scope.currentReceipt, it makes ng-src attribute empty but doesn't reflect it in src attribute. So as a result I keep seeing that image where I need empty placeholder.

How can I deal with it?

Possible duplicate of empty ng-src doesn't update image

Amit G
– Amit G

2017-03-14 22:03:52 +00:00
Commented Mar 14, 2017 at 22:03 — Amit G
– Amit G, Commented Mar 14, 2017 at 22:03

Stewie · Accepted Answer · 2013-07-06 13:17:34Z

24

This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently (I see a pull request here.).

So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

edited Jul 6, 2013 at 13:17

answered Jul 5, 2013 at 16:59

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

3 Comments

Terry Over a year ago

+1 for using ng-show, you may also want to consider removing the image from the DOM with ng-switch if you want it completely removed.

Sergei Basharov Over a year ago

Thanks, seems like I have to workaround it the way you suggest. I have had a look inside Angular code managing ng-src directive and noticed that too, that it just exits, if no value given, not removing existing src value or anything like that. I have decided to use ng-class to manage cases like this. Thanks!

Stewie Over a year ago

I guess the authors intentionally made the directive to just exit if value is undefined, because removing/clearing the src attribute makes the browser display the broken image thumbnail, which isn't really desired.

Hardik Chauhan · Accepted Answer · 2014-09-02 11:01:28Z

12

call $scope.$apply() after delete $scope.currentReceipt.

answered Sep 2, 2014 at 11:01

Hardik Chauhan

2,74619 silver badges30 bronze badges

Comments

Mingyu · Accepted Answer · 2015-06-29 23:15:36Z

1

The following solution works for me:

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

answered Jun 29, 2015 at 23:15

Mingyu

33.8k14 gold badges58 silver badges63 bronze badges

Comments

Michel Arteta · Accepted Answer · 2016-04-13 16:56:49Z

0

You can actually check for length and do

 <img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">

answered Apr 13, 2016 at 16:56

Michel Arteta

1,3742 gold badges13 silver badges25 bronze badges

Collectives™ on Stack Overflow

AngularJS doesn't update img src when model changes

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related