javascript - 如果 ng-src 图像属性抛出错误，有没有办法抑制控制台错误？

Question

我有以下 Angular 代码。

<img class="img-circle image-stroke" ng-src="{{person.photo}}" onerror="this.src='http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg.hi.png'"></img>

我正在从数据库中取回一个人物对象，该对象的 photo 属性包含人物照片的 url。问题是，有时这个值将为空。如您所见，我在标记中使用 onerrror 属性对其进行了处理，因此只要它为 null，并且 ng-src 抛出错误，它就会落下回到默认图像。

问题是，它仍然会在控制台中抛出以下错误。

获取 http://localhost:3000/module/seasons/person.photo 404(未找到)

有什么办法可以抑制这个错误吗？在生产中，很可能会有 12 或 13 个人同时没有照片值(value)，我不希望我的老板在控制台中看到 12 或 13 个错误，即使实际站点上没有任何问题。

Answer 1

只有当 src 不为 null 时才可以渲染，否则渲染备份图像:

<img ng-if="person.photo" class="img-circle image-stroke" ng-src="person.photo"></img>
<img ng-if="!person.photo" class="img-circle image-stroke" src="http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg.hi.png"></img>