我正在显示带有 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
指令会呈现图像的 src 而 currentBook.idcode
没有值,一旦它被填充到范围内,另一个摘要循环运行更新图像。所以前一个导致 404。您可以在图像上放置 ng-if
。
例如:-
<img style="width: 100px" ng-if="currentBook.idcode"
ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>
您可以看到一个小型演示实现 here
但这似乎已在 1.3.x 版本的 angular 中修复,以防止在扩展所有插值以获取值之前渲染图像 src。 <强> Plnkr
ng-cloak
仅在加载 Angular 时不要短暂公开插值表达式才有帮助。
一些附加信息(@zeroflagL 提供):
在 Angular 版本 1.3.x 中,ng-src 使用全有或全无插值 (feature addition to interpolateProvider),这意味着除非解析所有绑定(bind)插值,否则它不会扩展指令。您可以在 compile provider source 中看到此映射.
ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
关于angularjs - 为什么我在 ng-src 中出现 404 错误,即使图像正在出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27880972/