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 picture that is stored locally on my webserver. Does anyone have a suggestion how to test the urls and in the case of status code 404 replace the broken image?

Thanks!

Answer 1

Listen to the error event of the image element:

<img [src]="someUrl" (error)="updateUrl($event)"> 

where updateUrl(event) { ... } assigns a new value to this.someUrl.

Plunker example

If you want to check in code only you can use the method explained in Checking if image does exists using javascript

@Directive({   selector: 'img[default]',   host: {     '(error)':'updateUrl()',     '[src]':'src'    } }) class DefaultImage {   @Input() src:string;   @Input() default:string;    updateUrl() {     this.src = this.default;   } } 

Directive Plunker example

Answer 2

You can use onError event this way to handle invalid url or broken url.

• https://plnkr.co/edit/fD8zxd?p=preview

<img [src]="invalidPath" onError="this.src='images/angular.png'"/>  

This way you can directly assign img path to src with onError event