AngularJS ng-if用于加载图像时生成错误

Question

当我使用以下AngularJS HTML标记加载图标时，我收到了一个未找到的错误（但一切都以图形方式工作）：

<div class="page-icon" ng-if="icon != null">
    <img src="{{icon}}">
</div>

生成以下未找到错误：

GET http://localhost/%7B%7Bicon%7D%7D 404 (Not Found)

Answer 1

改为使用ng-src属性。

<div class="page-icon" ng-if="icon != null">
    <img ng-src="{{icon}}">
</div>

为什么会这样？ 基本上，因为在角度甚至开始之前，浏览器将查看DOM并找到src的值为{{icon}}的图像。因此它会尝试从http://localhost/{{icon}}加载图像。当然，它没有找到。

在AngularJs完成它之后，src将填充正确的值，图像将被加载并显示。

ng-src所做的是等待变量icon至少有一次值，然后才设置真实属性src的值。这意味着只有这样浏览器才知道有一个要加载的图像，并且它已经有正确的URL。