13

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?

Sergei Basharov
  • 51,276
  • 73
  • 200
  • 335
  • Possible duplicate of [empty ng-src doesn't update image](http://stackoverflow.com/questions/22092687/empty-ng-src-doesnt-update-image) – Amit G Mar 14 '17 at 22:03

4 Answers4

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" />
Stewie
  • 60,366
  • 20
  • 146
  • 113
  • 1
    +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. – Terry Jul 05 '13 at 23:49
  • 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! – Sergei Basharov Jul 08 '13 at 07:04
  • 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. – Stewie Jul 08 '13 at 10:15
12

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

Hardik Chauhan
  • 2,750
  • 15
  • 30
1

The following solution works for me:

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />
Mingyu
  • 31,751
  • 14
  • 55
  • 60
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}}">
Michel Arteta
  • 1,384
  • 2
  • 13
  • 25