Angular 如果发生错误，如何更改图像源？

为什么下面的语句会抛出错误

创意：显示普通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上找到了替代答案，建议对普通图像使用

ngsrc

，对回退图像使用

onerror=“this.src='url'

。但是，如何使用[src]绑定和（错误）事件绑定实现同样的功能？

尝试以下方法：

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

如果不起作用，您可以尝试以下方法：

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

---

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

然后更改模板，如下所示：

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

---

它将图像源更新为您的备用源。

看起来这个问题是关于angularjs的，所以我删除了angularjs标记。该标记用于回答有关AngularJS 1.0的问题。您应该在组件中实现此逻辑，而不是在模板中。您可以将[src]绑定到一个变量，该变量在出现问题时解析为一个或另一个

img

标记位于for循环内。因此，我无法将

[src]

绑定到变量。@Benedict能否将src作为数组元素的属性？或者，您可以将路径存储在单独的数组中，并使用for循环索引访问itI。但是，我不明白为什么它不起作用<代码>在组件内部，

变更源（事件，名称）{event.src=this.fallback_path+name；}

因为

事件

不是元素。您可以尝试

event.target.src

？谢谢！它侦听并响应错误，但变量

name

在处理程序中未定义，而

item.leafname

在

[src]

绑定中使用时工作正常。

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