empty ng-src doesn't update image - angularjs

Question

I am using the ng-src directive in order to avoid the browser to request the image before Angular evaluate the expression.
ng-src={{image}} will update the src attribute of the image if the expression "image" change.
I misunderstand why the ng-src directive doesn't update the path of the image if the expression ("myImage.png") become empty ("").
When the expression become empty, the ng-src attribute become empty but the src attribute still the last known src. So it doesn't update the image. Why the src attribute isn't updated (to an empty src) so that the image "disappear".
Here is a plunker
Thanks

Answer 1

The answer to this is in the Angular code. It's not a bug, it's just the behavior they decided they wanted. Starting on line 13895, you can see this directive code:
forEach(['src', 'srcset', 'href'], function(attrName) {
var normalized = directiveNormalize('ng-' + attrName);
ngAttributeAliasDirectives[normalized] = function() {
return {
priority: 99, // it needs to run after the attributes are interpolated
link: function(scope, element, attr) {
attr.$observe(normalized, function(value) {
if (!value)
return;
attr.$set(attrName, value);
if (msie) element.prop(attrName, attr[attrName]);
});
}
};
};
});
The key is in:
if (!value) return;
So as you can see, if you change the ng-src expression to an empty string, this will never change the actual src value. You can get around this doing something MadScone suggested.

Answer 2

MadScone's suggestion is a cool idea, but it didn't work for me in all browsers. I ended up just showing the element only when the src isn't empty:
<img ng-show="theImage!==''" ng-src="{{theImage}}">
This seems like the safest option to me after reading through the thread that MadScone referenced (here). As a number of people pointed out there, the accepted answer doesn't work in all browsers and has some other issues that could arise. Simply hiding the element avoids all that.
Update:
As enpenax pointed out in the comments, the !=='' in the ng-show is totally unnecessary. Here's the cleaner version:
<img ng-show="theImage" ng-src="{{theImage}}">

Answer 3

Update (April 2015)
See developering's answer, apparently this method I suggested originally may not work in all browsers.
Original (February 2014)
I'm not fully sure why that's happening, but here's a way of solving it anyway. Add this function to your controller:
$scope.getImage = function(src) {
if (src !== "") {
return src;
} else {
return "//:0";
}
};
The "blank" image will get a source of //:0 which won't cause a missing image icon to appear (see the top answer on this thread).
Then you can set your source using:
<img ng-src="{{getImage(superImage)}}" />
EDIT:
Actually, it would be easier to change your button click to this:
<button ng-click="superImage = '//:0'">Remove superImage</button>
Then there's no need for the function. Although I think the function method is better.

Answer 4

Another short way of solving it:
<img ng-src="{{image?image:' '}}" />

Answer 5

fix it by set value = " ";
with whitespace.
I also add the following css to make sure it's not displayed.
img[src="_"]
display none !important
the real reason has been discussed here: https://github.com/angular/angular.js/issues/1218

Answer 6

ng-hide and ng-show can help you solve it
<img ng-src="{{Image}}" ng-hide="Image == null" ng-show="Image != null" ng-click="ChooseImage()" width="100%" />
$scope.Image = null;
or
<img ng-src="{{Image}}" ng-hide="Image === ''" ng-show="Image !== ''" ng-click="ChooseImage()" width="100%" />
$scope.Image = '';

Answer 7

<img data-ng-src="{{image || 'http://www.1x1px.me/FFFFFF-0.png'}}" data-ng-model="image">
You can choose any 1x1px image that suitable to your website and replace http://www.1x1px.me/FFFFFF-0.png of your own. For my website I use available image on http://www.1x1px.me.
P/S: No need to worry about the original src attribute of img tag because it's not affected to image model

Answer 8

A possible workaround to empty ng-src can be found here.
<img ng-src="{{image || '//:0' }}" />
Detailed explanation to use //:0 can be found from this answer.
To summarize:
It adopts the current protocol, omits the hostname and sets the port to zero, which is invalid and should be killed by the network layer.
Also instead of emptying ng-src, if you have a default image source then you can simply set the ng-src to that default src when ng-src have to be empty.

Answer 9

<img src="{{superImage}}" />
This works as expected
Edit:
Other work arround,may be you could have used and empty string.
ng-click="superImage = ' '
to make it empty. It does not trigger 404