angularjs - 为什么我在 ng-src 中出现 404 错误，即使图像正在出现？

Question

我正在显示带有 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我理解在变量存在之前停止任何执行。

为什么会出现此错误，我该如何抑制它？

Answer 1

看起来您可能正在加载异步填充 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'),