Image getting cached in Angular

Question

I am using angular version 9. I have 2 components. 1 to search a car make, model and 2nd component to load the details of the car that is selected from component 1. I pass the image link for the car from the car that is selected from component 1 to component 2 and load that image in component 2. This works fine..

When I browse to some other page in my application and again go to the component 1 and select a different car and go to component 2, the image of the previously selected car shows for around 1-2 seconds and then my new image is shown. This looks like a browser caching problem. I have tried to load a loader image initially till my new image completes loading and then show the newly loaded image but it does not work. What I have tried is as below.

<img *ngIf="isLoading" [src]="loadingimage.png" />
<img [hidden]="isLoading" [src]="carModelImage" (load)="isLoading = false"/>

What I have noticed is, the moment component 2 is opened the (load) event on the img tag fires and changes the isLoading value to false even without waiting for the new carModelImage to load and thus the previous image shows for some time.

My component code looks like below.

@Component({
selector: 'app-request-summary',
templateUrl: './request-summary.component.html',
styleUrls: ['./request-summary.component.scss']
})

export class RequestSummaryComponent implements OnInit, OnDestroy {
    public carModelImage: string = '';
    public isLoading: boolean = true;

   constructor() {
     this.carModelImage = '';
     this.isLoading = true;
   }


   ngOnInit() {
   this.requestSummaryService.carData
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe((data) => {
      this.carModelImage = data[0].carModelImage ? data[0].carModelImage 
      :'http://nocarimage.png';
    }
   }

   ngOnDestroy() {
     this.isLoading = true;
     this.carModelImage = '';
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }
}

I am struglling due to this issue since quite a long. Any help will be highly appreciated.

This is not the browser cache. It looks like your components are not destroyed when you navigate, so when you go back to your page, they remember their last value. They don't even run their constructor (since they already exist). Can you show your components code ? — Random, Aug 04 '20 at 12:50
I have updated the code. And if I put `console.log` statement in my `ngOnDestroy` method it gets executed so I feel the component is getting destroyed when I navigate to some other page. — girish, Aug 04 '20 at 13:01
triggering a console.log in the ngOnDestroy doesn't tell you the component is destroyed. It tells you "Angular TRIED to destroy it". — Random, Aug 04 '20 at 13:04
Okay.. any way to find out if the component has actually got destroyed? — girish, Aug 04 '20 at 13:05
add a console log in its constructor and ngOnInit, and see if it is triggered a 2nd time after navigating... — Random, Aug 04 '20 at 13:07
but I don't believe the problem comes from the child. Can you post the code of the parent ? — Random, Aug 04 '20 at 13:08

score 1 · Answer 1 · answered Aug 04 '20 at 12:47

1

Well, I don't have much to go on here, but I'll share a simple pattern with you.

When your image is no longer being displayed null it out.

For example somewhere in your code you probably write this:

carModelImage = "your-image";

When you are sure you no longer need this var anymore, null it out.

carModelImage = null;

Post more code if you want help specific to your issue.

answered Aug 04 '20 at 12:47

Damian C

1,813
1
12
17

I already do that in my `ngOnDestroy` method but still same issue. – girish Aug 04 '20 at 12:51
I wasn't aware you had an ngOnDestroy. Please update your original question with as much relevant code as possible. – Damian C Aug 04 '20 at 12:52
the issue is it was a subscription, and subscription wont be unsubscribed unless its called explicitly. The code for this.requestSummaryService.carData , looks like you are not passing any parameters why is that? – Muthukumaran Aug 05 '20 at 05:46
Ok sorry I did not update the ngOnDestroy method in question properly and I have done it now.. I am already unsubscribing the subscription in ngOnDestroy method. About the API call believe me I am getting the correct value from the API. only thing is it shows previously loaded image for a second or 2 like a cache issue. – girish Aug 05 '20 at 06:37

score 1 · Answer 2 · answered Aug 04 '20 at 13:13

1

How do you assign carmodelImage variable . The carmodelImage is responsible for showing the previous image, if you could nullify it on destroy may be it should help

Assuming you said ngondestroy is being called

answered Aug 04 '20 at 13:13

Muthukumaran

102
3
4

The value of carmodelImage comes from the backend via API call which I make in ngOnInit and just access the value on frontend and yes I make the value of carModelImage null in ngOnDestroy method and to just verify if its getting null I have printed its value in console and it is showing null when ngOnDestroy is called. – girish Aug 05 '20 at 04:57
What I want to highlight is the "(load)" event on the img tag "FIRES TWICE" which is weird. It fires once when the component 2 is loaded this time it shows previous image and it fires after some time again and this time the correct image is shown – girish Aug 05 '20 at 06:27

Image getting cached in Angular

2 Answers2