簡體   English   中英

angular2 onError 圖像綁定

[英]angular2 onError image binding

我想知道我們是否可以使用 angular2 綁定或插入圖像標簽上的 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 - 檢查圖像 url 是否有效或損壞

但由於某種原因不起作用,我不知道我在這里做錯了什么

幾乎完成了,他只是在活動結束后忘記改變形象。

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

這是鏈接

組件.ts

onImgError(event){
 event.target.src = './assets/imgs/altImg.png'
//Do other stuff with the event.target
}

組件.html

 <img [src]="imgUrl" (error)="onImgError($event)">

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM