EN
JavaScript - reload image with the same URL
3
points
In this article, we would like to show you how to reload an image with the same URL using JavaScript.
Quick solution:
Append to image URL
'?' + Date.now()posfix that forces web browser, CDNs and other cacheing software to download image as new one.
var image = document.querySelector('#image');
image.src = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png?' + Date.now();
Practical example
The technique used in the example is called cache-busting query parameter that causes the image reloading even the URL is still the same.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<img id="image" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<script>
var image = document.querySelector('#image');
image.src = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png?' + Date.now();
</script>
</body>
</html>