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指令将为图像呈现没有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'),

Answer 2

在这种情况下，您可能想要做的是在范围内实际创建一个函数，为图像路径创建ULR：

<img style="width: 100px" ng-if="currentBook.idcode" ng-src="getImagePath(currentBook.idcode)">


var absolutePath = 'somepath/';
$scope.getImagePath = function(idcode) {
    return absolutePath + 'customImages/' + idcode + '.png';
}

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

2 个答案: