如果发生错误，如何更改图像的来源？答案

【问题标题】：How do I change the source of an image if an error occurs?如果发生错误，如何更改图像的来源？
【发布时间】：2018-05-20 13:13:00
【问题描述】：

为什么下面的语句会报错？

想法：显示来自正常 URL 的图像。如果未找到 (404)，则显示后备图像。

工作完成：

<img [src]='image_path + item.leafname' (error) ="[src] = 'fallback_path + item.leafname'" height="200px" class="card-img-top">

抛出错误：

Parser Error: Unexpected token '=' at column 7 in [[src] = 'image_path + item.leafname'] in ng:///AppModule/DashboardComponent.html@46:60

其他答案： 我在 Stack 上找到了替代答案，建议使用 ng-src 作为常用图像，使用 onerror = "this.src='url'" 作为备用图像。但是，如何使用 [src] 绑定和（错误）事件绑定来做同样的事情？

【问题讨论】：

标签： angular

【解决方案1】：

您应该在组件中实现此逻辑，而不是在模板中。

然后像这样更改您的模板：

<img [src]='image_path + item.leafname' (error) ="changeSource($event, item.leafname)">

然后创建一个错误处理程序，如下所示：

changeSource(event, name) { event.target.src = this.fallback_path + name; }

这会将图像源更新为您的后备源。

【讨论】：

img 标签在 for 循环中。因此，我将无法将[src] 绑定到变量。
@Benedict 你能把 src 作为你的数组元素的属性吗？或者您可以将路径存储在单独的数组中，并使用 for 循环索引来访问它
我试过这个。但是，我不知道为什么它不起作用。 <img [src]='image_path + item.leafname' (error) ="changeSource($event, item.leafname)" 组件内部，changeSource(event, name) { event.src = this.fallback_path + name; }
因为event 不是元素。你可以试试event.target.src？
谢谢！它监听并响应错误，但变量 name 在处理程序中未定义，而 item.leafname 在 [src] 绑定中使用时工作正常。

【解决方案2】：

试试这个：

if(typeof(src)==="undefined")
{
$("#imageID").attr("src","yourNewSource_goes_here");
}

如果这不起作用，你可以试试这个：

if(document.getElementById("myImg").complete==false)
{
$("#myImg").attr("src","another_source_goes_here");
}

【讨论】：