使用mod_headers或mod_expires使图像不可缓存

Question

My question is related to one post discussed some time ago: how to clear or replace a cached image

Let me introduce what I am doing... I use JavaScript to create an animation that will be updated every 5 minutes. I use the trick of adding time stamps to the image names, so my images are like: image-1-no-cache.png?d=131415135135

I use this to ensure the update. If I don't make the difference between names, the browser won't update anything because the images will be stored in the cache and the browser won't realize that they changed. The problem I have is that the images are continuously stored. I lose the reference via JavaScript and I don't know how to delete them. After some hours, the cache is full of images and the web site is taking to much RAM.

What I am trying to do right now is to set an expiration date to the images. I enabled the modules mod_headers and mod_expires and I changed my .htaccess file trying different things:

<Files ~ ".*no-cache\.png?=*">
   Header set Cache-control "no-cache"
</Files>

or

<FilesMatch ".*no-cache.png.*">
     ExpiresActive On      
   ExpiresDefault A300
</FilesMatch>

Nothing works. The idea is to make the files -no-cache.png?=. non-cacheable. Why I am not getting good results ? What am I missing ?

This is the first time trying to do something similar and I am quite confused. Any help will be appreciated. Thank you ! Yun

Answer 1

Adding ?something to the image does not make it non-cacheable. It creates new URL which can be cacheable , and it does not affect other URLs, so all other ?versions remain in the cache as well.

<Files ~ "no-cache\.png">
   Header set Cache-control "max-age=10, must-revalidate"
</Files>

This will tell Apache to add header to all files with no-cache.png anywhere in the filename ( .* is not needed). AFAIK this matches filesystem name, not the URL, so query string will never be there).

The header says to cache for maximum 10 seconds and check freshness with the server before every use.

Answer 2

This does not work !

Using you configuration, the browser should revalidate (=update) the image after 10 seconds and this is not happening.

I think that the best option is to set "Header set Cache-Control "no-store"". If I have all the images referenced in a JavaScript Image array I don't need to use the cache. For now, this is the best option I found.

Thank you anyway, Yun