angularjs – 即使图像出现,为什么我的ng-src会出现404错误？

我正在使用ng-src显示图像：

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

找到并显示正常,但在Firebug控制台中,我收到此错误：

NetworkError：404 Not Found – http：//localhost/learntracker/customImages/.png“

好像这是在变量存在之前执行的.

此HTML代码存在于< div ng-cloak ng-app =“mainModule”>内.和ng-cloak我理解在变量存在之前停止任何执行.

为什么会出现此错误,如何抑制它？

看起来您可能正在加载异步填充currentBook对象的数据.因此,在上一个摘要周期中,ng-src指令将为图像呈现没有currentBook.idcode值的src,并且一旦它填充在作用域上,另一个摘要周期就会运行更新图像.所以前一个导致404.你可以在图像上放置一个ng-if.

例如： –

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

您可以看到一个小型的演示实现here

但这似乎已经修复了1.3.x版本的角度,以便在所有插值扩展到获取值之前防止渲染图像src. Plnkr

ng-cloak仅在角度加载时不会短暂暴露插值表达式.

一些额外的信息(Courtesy @zeroflagL)：

对于角度版本1.3.x ng-src使用全部或全部插值(feature addition to interpolateProvider),这意味着除非解析所有绑定插值,否则它不会扩展指令.您可以在compile provider source中看到此映射.

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