CODEWITHSUNDEEP
htmlangularcachingbrowser-cachecache-control
JudahA
JudahA

Reputation: 91

Angular: When image is removed and re-added, it doesn't create new request, and doesn't honor the cache-control header

I have a very simple angular project, with interval that cyclic add an image and remove it after some seconds.

The image have an header Cache-control: max-age: 60.

I'm monitoring the request that the page sends, and I see that it creates only one request for the first time the image is added.

After the first request, the page never validate the image freshness. So, if I replace the image at the server, the client never get the new image.

What is the reason, and what I can do?

Sample project:

https://stackblitz.com/edit/angular-cache-control?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

Views: 594

Answers (3)

JudahA
JudahA

Reputation: 91

My answer: It is not possible.

Probably, the brwoser has a cache ending that save the image, even after it is removed from DOM. So, when I add he image again to the DOM, the browser doesn't create a new request.

Upvotes: 0

Sanjay
Sanjay

Reputation: 2503

If Image change is frequent then you need to add some random string in image url so every time it will fetch new image.

If image change is frequent then add current time stamp.

If image change is days then you can add new random string base on date.

If your image name is dynamic I mean you will be getting image name from server then change image name everytime so it will get fresh image.

Upvotes: 0

cpc
cpc

Reputation: 638

it might not be the best solution, but you can trick the browser into thinking the source changed by applying a semi-random query parameter to your query.

in this example the image will be loaded with the query param ?cacheBust=CURRENT_TIMESTAMP

every time you change the image/toggle its visiblity the timestamp will be updated to a new value.

https://stackblitz.com/edit/angular-cache-control-rhcqh5?file=src/app/app.component.html

Upvotes: 2

Related Questions