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

Question

为什么以下语句会抛出错误？

想法：显示普通网址的图片。如果未找到（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]绑定和（错误）事件绑定来做同样的事情？

Answer 1

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

然后像这样更改模板：

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

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

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

将图像源更新为后备源。

Answer 2

试试这个：

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

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

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