Disable Cache For Some Images

Disable cache for some images

A common and simple solution to this problem that feels like a hack but is fairly portable is to add a randomly generated query string to each request for the dynamic image.

So, for example -

<img src="image.png" />

Would become

<img src="image.png?dummy=8484744" />

Or

<img src="image.png?dummy=371662" />

From the point of view of the web-server the same file is accessed, but from the point of view of the browser no caching can be performed.

The random number generation can happen either on the server when serving the page (just make sure the page itself isn't cached...), or on the client (using JavaScript).

You will need to verify whether your web-server can cope with this trick.

How to force a web browser NOT to cache images

Armin Ronacher has the correct idea. The problem is random strings can collide. I would use:

<img src="picture.jpg?1222259157.415" alt="Sample Image">

Where "1222259157.415" is the current time on the server.

Generate time by Javascript with performance.now() or by Python with time.time()

Disable images caching in browser

This is not a texture issue it's an <img> issue. The supposed solution is you need to send the correct headers from your server to tell the browser not to cache the texture. If you can't set the correct headers a workaround is to add query parameters to your image URL.

const imageUrl = `./Textures/dirswindsigma995.jpg?${Date.now()}`;

Now every time you request the image the browser will see a different URL

Note that it's unlikely you can use require for this.

How to disable cache when loading images

Try Using .diskCacheStrategy( DiskCacheStrategy.NONE )

   Glide  
        .with( context )
        .load( eatFoodyImages[0] )
        .diskCacheStrategy( DiskCacheStrategy.NONE )
        .skipMemoryCache( true )
        .into( imageViewInternet );

for more please check this link https://futurestud.io/tutorials/glide-caching-basics

How to prevent browser image caching?

Just put a random parameter at the end of the image URL. A timestamp can also be used very well for this.

For example in PHP:

"http://domain.com/img.png?t=" . time();

The browser will always load this image new. You should use it with care though, it will make loading times slower.

Prevent browser from caching images

Try putting a random variable on the end of the url

http://www.test.com/images/123.jpg?{{rand()}}

How to prevent browser image caching in HTML

Expanding on the previous comments, add the image with a time stamp, like so:

<div id="bck-img"></div>
    <script type="text/javascript">
            var container = document.getElementById("bck-img");
            var image = document.createElement("img");
            image.setAttribute("src", _spPageContextInfo.webAbsoluteUrl+"/SiteAssets/article-photo.jpg?rev="+new Date().getTime());
            container.appendChild(image);
    </script>

_spPageContextInfo.webAbsoluteUrl is the URL of the current sharepoint web,
whereas ?rev="+new Date().getTime(); appends the timestamp to the filename, ensuring it'll be loaded from server on every page load.

---

Related Topics