angularjs - Why am I getting a 404 error with ng-src even though image is appearing?

Question

I am displaying an image with ng-src:

<img style="width: 100px" ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>

which is found and displays fine, however in Firebug console, I am getting this error:

NetworkError: 404 Not Found - http://localhost/learntracker/customImages/.png"

as if this is being executed before the variables exist.

This HTML code exists inside a <div ng-cloak ng-app="mainModule"> and ng-cloak I understand to stop any executing before the variables exist.

Why is this error occurring and how can I suppress it?

Answer 1

Looks like you might be loading the data which populates currentBook object asynchronously. So during the previous digest cycle, ng-src directive would have rendered the src for the image with no value for currentBook.idcode and once it gets populated on the scope, another digest cycle runs updating the image. So the previous causes the 404. You could place an ng-if on the image.

ex:-

<img style="width: 100px" ng-if="currentBook.idcode" 
     ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>

You could see an small demo implementation here

But this seems to have been fixed with 1.3.x version of angular, in-order to prevent rendering of image src before all the interpolations are expanded to get values. Plnkr

ng-cloak is only helpful not to expose interpolation expression briefly while the angular is loading.

---

Some additional info (Courtesy @zeroflagL ) :

With angular version 1.3.x ng-src makes use of all or nothing interpolation (feature addition to interpolateProvider), meaning it will not expand the directive unless all the bound interpolations are resolved. You can see this mapping in the compile provider source.

ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),