Angular - Use a default image if image does not exist on server

Question

I have a component that will display a cover image. The user can upload a cover image and the component will display the user uploaded image. If the user doesn't upload an image, then I want to display a default image.

If there is no user uploaded image I want to return an error and call the changeSource(event), which should in theory bind a new image url to the img src. However I'm getting undefined for the event.target.src and I'm seeing a blank space where the default image should be. It works fine when displaying the custom image.

component.html

<div *ngFor="let coverPhoto of coverPhotos">
    <img src="{{coverPhoto}}"
         (error) ="changeSource($event)" />
</div>

component.ts

this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
            this.coverPhotos = result;
        }, error => {
                this.errors = error;
                this.changeSource(event);
           }, () => {
        }
        );

changeSource(event) {      
        event.target.src = "https://imageurl";
    }

Does this answer your question? [Angular 2 - Check if image url is valid or broken](https://stackoverflow.com/questions/36429903/angular-2-check-if-image-url-is-valid-or-broken) — Kinglish, Dec 01 '21 at 16:08
Thanks. I've looked through this page already and created a directive, which didn't solve the issue either. Will look through it again though. — Robgit28, Dec 01 '21 at 16:17
Thought it might be and tried that before but it throws an error. Thanks for the suggestion. — Robgit28, Dec 01 '21 at 16:28

Shyam Joshi · Answer 1 · 2021-12-01T16:37:00.920

1

directly use (where defaultImage is a variable in ts file which holds the default image path) -

(error)="$event.target.src = defaultImage"

your HTML -

<div *ngFor="let coverPhoto of coverPhotos">
  <img src="{{ coverPhoto }}" (error)="$event.target.src = defaultImage" />
</div>

Working example here.

You are passing event from this code in ts, which is obviously undefined, and you don't need to call this function from here -

this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
            this.coverPhotos = result;
        }, error => {
                this.errors = error;
                this.changeSource(event);
           }, () => {
        }
        );

edited Dec 01 '21 at 16:37

answered Dec 01 '21 at 16:28

Shyam Joshi

830
7
18

1

I would contend that it's almost always a bad idea to manipulate the DOM directly in such a way in an Angular app. It would be better to swap out the binding in src than to get src out of sync with what Angular thinks it's bound to. – Dean Dec 01 '21 at 16:37
Thanks for the suggestion on removing changeSource() function, however it still isn't working with (error)="$event.target.src = defaultImage". I'll keep on mining it and post a solution hopefully. – Robgit28 Dec 01 '21 at 16:46

score 1 · Answer 2 · answered Dec 01 '21 at 17:04

1

The *ngFor was throwing it off. Removing this seemed to solve the problem. Not quite sure why so will post an edit when I discover why.

<div>
    <img src="{{coverPhotos}}"
         (error)="$event.target.src = defaultImage" />
</div>

answered Dec 01 '21 at 17:04

Robgit28

268
4
18

1

That probably means `coverPhotos` isn't an array. ngFor is meant to loop over an array of items. – Dean Dec 01 '21 at 17:19

Angular - Use a default image if image does not exist on server

2 Answers2