javascript - 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>

为什么会发生这种情况？ 基本上，因为在 Angular 启动之前，浏览器将查看 DOM 并找到 src 值为 {{icon}} 的图像。因此它将尝试从 http://localhost/{{icon}} 加载图像。当然，它什么也找不到。

AngularJs 完成工作后，src 将填充正确的值，并且图像将被加载和呈现。

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