0

Before trying to say this was answered elsewhere or is a duplicate - PLEASE fully read. All other solutions are cache-busters forcing image reload EVERYTIME. I only want to force image reload on condition of new image size - but keeping same image name.

On my server I am naming images ceLogo_C1001.png - the 1001 is the customer ID, the image is the company logo. If the client updates their image on the server side, the image is still named ceLogo_C1001.png. 

  <img ng-src='myserver.com/clients/images/ceLogo_C1001.png'>

However, in the app, the image isn't updating and is showing the old ceLogo_C1001.png - not the new one. I believe this is because the old image and the new image have the same name. Is there anyway to get the app to force reload the image if it recognizes the image size is different from the last one - even though the images still have the same name? I am trying to force a certain uniformity in naming...without having to add dates or incremental numbers (IE: ceLogo_C1001_1.png) to force a name change - which would then force an image reload.

rolinger
  • 2,787
  • 1
  • 31
  • 53
  • @georgeawg - hey man, my question is NOT those questions. Those cache-buster solutions are to tag additional time stamp paraemeters to an image name - that will force image reload EVERY TIME. I only want forced image reload if determine image size is different. Please reopen this. – rolinger Mar 12 '20 at 14:09
  • @georgeawg - thank you. – rolinger Mar 12 '20 at 14:10
  • Hmmm, as I think this through I am not certain it can be done. Caching depends on recognizing existing names/urls already visited. If it sees the same image/url it loads from cache and thus never asks the server for the new image. And if it never asks for the new image it can't evaluate the new size to force a new load. – rolinger Mar 12 '20 at 14:19
  • If the app knows that the image is different, there are ways to force the browser to reload the image. Otherwise the browser cache is doing its job, avoiding needless GET requests. – georgeawg Mar 12 '20 at 15:15
  • I have a question, if the old image is removed and new image with same name put instead, at least the image should put image atrribute with no image even if there is cache except if you use base64 image encoding it would do that, if i am wrong , try to call any image at page enter and after that replace it with the client image so it will be forced to refetch the image on each entry. – Mostafa Harb Mar 12 '20 at 15:33
  • @MostafaHarb - I don't follow what you are saying. However, url's that fetch the same image name will pull the image from cache - thats the purpose of cache. Even if the remote image has been updated - if it still has the same name the browser won't pull the new image. Cache busting by appending something like `image.png?ver=1` is the only way to force the browser to pull the new image. The next time the image is updated the url would be `image.png?ver=2` – rolinger Mar 12 '20 at 18:13

1 Answers1

0

Image cache refresh based on image size change is not possible. The purpose of cache is to store items by name so the next time the browser see's a request for that named resource it doesn't reload that specific item from the remote server - it pulls it from cache.

Therefore, if the url is pulling an image by the same name, one that was already stored in cache, it WON'T even request that image from the remote server. And if its not requesting the same named image again, there is no way for the browser to know the image on the server has a new size.

The only way to do cache busting (force reload an image that is already in cache) is to append something like ?ver=1 to the end of the URL. When ever the image is updated then increment the version number

image.png becomes image.png?ver=1 // this url gets cached In two months a new image is uploaded, but the name stays the same, increment the counter to: image.png?ver=2 this will force a reload and now maybe this image stays the same, and in cache, for the next 3 month.

I am answering my own question and leaving this here in case anyone else ever tries going down the same path I just did.

rolinger
  • 2,787
  • 1
  • 31
  • 53