angular2 onError 图片绑定(bind)

标签 angular typescript

我想知道我们是否可以使用 angular2 在图像标签上绑定(bind)或插入 onError,

在 app.component.ts 上:

imageUrl:string;

  constructor( ) {
      this.imageUrl = 'graphics/placeholder.gif';
   }

在 app.component.html 上:

<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="imageUrl"/>

下面的方法有效。

<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="this.src='graphics/placeholder.gif'"/>

但是由于我们在应用程序上使用了很多图像,我想将其作为一个简单的动态解决方案,我也找到了这个答案,

Angular 2 - Check if image url is valid or broken

但由于某种原因不起作用,我不知道我在这里做错了什么

最佳答案

几乎完成了,他只是忘了在事件结束后更改图像。

errorHandler(event) {
   console.debug(event);
   event.target.src = "https://cdn.browshot.com/static/images/not-found.png";
}

这是 link

关于angular2 onError 图片绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42135268/

相关文章:

angular - Angular 中的 “which stylesheet format would you like to use (use arrow keys) ” 中缺少 SCSS 选项

Angular 4+ bootstrap NgbAccordion 如何全部展开/折叠

javascript - 将数据推送到对象时出现 Angular 4 错误

javascript - 在不更改文本不透明度的情况下禁用垫扩展

reactjs - react-router redirect 不会更改 Switch 中的 url

javascript - Github Typescript --> Javascript 差异比较

angular - 我如何处理(不是修复!)Ionic Framework 中的 CORS 异常?

angular - 指定索引处的动态组件未正确放置

angular - 将事件处理程序添加到动态加载的组件

typescript - 用 Moment JS 添加天数