Show default image in Angular2

It should be just defaultImage

<img src="{{( REST_URL) || defaultImage }}" height="200" />

without this ,a clean way :

<img [src]="REST_URL || defaultImage" height="200" />

showing default image in angular

REST_URL = `user/${this.userId}`;
this.restUrl = REST_URL || defaultImage;
<img [src]="restUrl" height="200" />

As mentioned in other answers, you don't need to specify this in your template when referring to the component class members. And there is another problem in your code...

You assume that, if the user image doesn't exist, the default image will be used as a result of the following expression:

(REST_URL + userId) || defaultImage

But that expression will never evaluate to defaultImage because (REST_URL + userId) is never falsy. Even if the image doesn't exist, its URL is not null, undefined or empty. Therefore, the user image URL is always used.

Solution 1

If you have a flag that indicates if the user image exists or not, you can use code like this:

<img [src]="imageExists ? REST_URL + userId : defaultImage" height="200" />

Solution 2

Another solution is to handle the error event and to change the URL to the default image if the user image cannot be loaded:

<img [src]="imageUrl" height="200" (error)="onError()" />

private defaultImage = "http://www.yourWebSite.com/yourDefaultImage.jpg";

public imageUrl = REST_URL + this.userId;

public onError(): void {
    this.imageUrl = this.defaultImage;
}

You can try the code in this plunker. After running it and seeing the "user image", you can make userImage incorrect in the code and see that the "default image" is displayed.