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.
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=1to the end of the URL. When ever the image is updated then increment the version numberI am answering my own question and leaving this here in case anyone else ever tries going down the same path I just did.