在Angular2中显示默认图像

Question

This is what I have in my html file:

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

REST_URL is user/ (on browser call http://localhost:8080/user/123456 shows user image)

in my component.ts file variables are defined as below:

readonly REST_URL = 'user/';
userId: number;

Not all users have an image and I expect default image to be shown when the user doesn't have an image but it doesn't work... any ideas?

Answer 1

它应该只是defaultImage

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

Answer 2

没有this ，一个干净的方法：

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

Answer 3

showing default image in angular

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

Answer 4

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.