Angular 2 - Check if image url is valid or broken

Question

I am fetching a large number of image URLs from an API and display them in a angular 2 web application. Some of the URLs are broken and i want to replace them with a default

Answer 1

If you want to change an image that is not loading or the source is broken... Angular 8, just have to change the src of this target for a default asset:

• Component HTML

  <... [src]="person.pictureUrl" (error)="pictNotLoading($event)" >

• Component TS

  pictNotLoading(event) { event.target.src = 'assets/nopicture.png'; }