how to clear or replace a cached image

Question

I know there are many ways to prevent image caching (such as via META tags), as well as a few nice tricks to ensure that the current version of an image is shown with every

Answer 1

You can append a random number to the image which is like giving it a new version. I have implemented the similar logic and it's working perfectly.

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>

Answer 2

It sounds like the base of your question is how to get the old version of the image out of the cache. I've had success just making a new call and specifying in the header not to pull from cache. You're just throwing this away once you fetch it, but the browser's cache should have the updated image at that point.

    var headers = new Headers()
    headers.append('pragma', 'no-cache')
    headers.append('cache-control', 'no-cache')

    var init = {
      method: 'GET',
      headers: headers,
      mode: 'no-cors',
      cache: 'no-cache',
    }

    fetch(new Request('path/to.file'), init)

However, it's important to recognize that this only affects the browser this is called from. If you want a new version of the file for any browser once the image is replaced, that will need to be accomplished via server configuration.

Answer 3

If you're writing the page dynamically, you can add the last-modified timestamp to the URL:

<img src="image.jpg?lastmod=12345678" ...

Answer 4

I'm sure most browsers respect the Last-Modified HTTP header. Send those out and request a new image. It will be cached by the browser if the Last-Modified line doesn't change.

Answer 5

<meta> is absolutely irrelevant. In fact, you shouldn't try use it for controlling cache at all (by the time anything reads content of the document, it's already cached).

In HTTP each URL is independent. Whatever you do to the HTML document, it won't apply to images.

To control caching you could change URLs each time their content changes. If you update images from time to time, allow them to be cached forever and use a new filename (with a version, hash or a date) for the new image — it's the best solution for long-lived files.

If your image changes very often (every few minutes, or even on each request), then send Cache-control: no-cache or Cache-control: max-age=xx where xx is the number of seconds that image is "fresh".

Random URL for short-lived files is bad idea. It pollutes caches with useless files and forces useful files to be purged sooner.

If you have Apache and mod_headers or mod_expires then create .htaccess file with appropriate rules.

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

Above will make *-nocache.jpg files non-cacheable.

You could also serve images via PHP script (they have awful cachability by default ;)

Answer 6

When changing the image filename is not an option then use a server side session variable and a javascript window.location.reload() function. As follows:

After Upload Complete:

Session("reload") = "yes"

On page_load:

If Session("reload") = "yes" Then
    Session("reload") = Nothing
    ClientScript.RegisterStartupScript(Me.GetType), "ReloadImages", "window.location.reload();", True)
End If

This allows the client browser to refresh only once because the session variable is reset after one occurance.

Hope this helps.