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?

Answer 1

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" />

Answer 2

在删除$ scope.currentReceipt之后调用$ scope。$ apply（）。

Answer 3

以下解决方案适合我：

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

Answer 4

你可以实际检查长度和做

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