使用角度检查 img-src 是否存在答案

【问题标题】：Check if img-src exists with angular使用角度检查 img-src 是否存在
【发布时间】：2016-01-08 04:06:32
【问题描述】：

我想要一个简单的确定图像源是否存在，以便我可以用默认图像替换图像。最好的情况是，如果这在纯 html 中可能使用“ng-if”或类似的东西是可能的。

<img ng-if="../images/{{id}}.png"  src="../images/{{id}}.png">

这段代码显然不起作用，但我认为它显示了我想要的。

编辑：

我得到的新代码，在我看来可以工作，但不起作用：

<img ng-src='{{ "../images/{{id}}.png" || "../images/img.png" }}'/>

在这种情况下，调试器会指出错误的引号。

编辑：

我认为第二种解决方案有效，这部分只是有一些错误：

<img ng-src='{{"../images/{{id}}.png"}}'/>

这部分有效：

<img ng-src='{{"../images/img.png"}}'/>

【问题讨论】：

什么不工作？图像不存在还是你能做一个小提琴
表达式不起作用，如果图像不存在，它也不显示图像。我尝试创建一个小提琴，但我不确定它如何与 angular 一起使用

标签： angularjs html

【解决方案1】：

你可以使用onerror，这里有一个demo。

<img ng-src="http://experenzia.com/images/431f5cfa87f2faf9317ccc89e980dcca/431f5cfa87f2faf9317ccc89e980dcca_t.jpg" onerror="this.src='http://www.experenzia.com/assets/images/planner/no-image-back.png'" alt="" >

【讨论】：

谢谢，我希望它尽可能简单，所以这对我来说是最好的解决方案。也许对于其他一些人来说，使用该指令的其他解决方案是最好的:)
caniuse.com/mdn-html_elements_img_onerror - 表示已弃用。这也不适用于 IE11（如果您必须为其提供商业支持，这一点很重要）。
stackoverflow.com/a/59366589/458321 - 最佳实践是在脚本中设置它，而不是作为属性。不推荐使用属性，而不是事件。