The Angular ngSrc
directive serves to properly set an image src
via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src
attribute is empty, Angular will not empty the src
attribute. To overcome this, use the trick below.
<img ng-src="{{ element.image || '//:0' }}" />
Background
The ngSrc
directive explicitly returns when the attribute value is falsy. As a workaround, set a "blank" image src when the image is empty. As
somebody on Stackoverflow
Show archive.org snapshot
writes, //:0
serves this purpose: 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.
As a result, Angular should now correctly empty the src
attribute when ng-src
empties.