防止img加载angularjs

Question

我有一个带图像的div：

<div ng-if="showIt">
    <img src="{{filepath}}/{{filename}}">
    <!-- ... and a bunch other other elements -->
</div>

如果{{filepath}}为false，则{{filename}}和showIt将为空。

但是，我总是在控制台中看到404错误，因为我认为Angularjs正在渲染整个DOM，然后删除ng-if求值为false的位。这意味着即使showIt为假，浏览器也会始终请求不存在的图像。

是否有办法阻止DOM创建整个div块，以便浏览器永远不会请求不存在的图像？

Answer 1

使用ng-src：

<img ng-src="{{filepath}}/{{filename}}">

您看到的404错误不是由ng-if引起的。它们是由浏览器在Angular评估角度表达式之前尝试加载图像引起的。评估表达式后，ng-src仅向映像添加src属性，从而避免向{{filepath}}/{{filename}}发送HTTP请求。