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

Question

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

想法:显示来自正常 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] 绑定(bind)和(错误)事件绑定(bind)来做同样的事情？

Answer 1

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

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

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

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

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

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