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'),
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…