How to get the new image URL after refreshing the image using JavaScript ? Last Updated : 01 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The browser cache relies on the image URL to decide whether the image is the same or not and whether to use the stored version. It means if we change something within the URL and then attempt to reload the image, the cache will no longer be able to change that it is the same resource. The cache will fetch it again from the server.Approach: To change the URL without affecting the image, you can change the parameter that can be attached to the end of the URL. The parameter needs to be unique. We can use a timestamp, the URL will always be unique.To refresh the image in JavaScript, we can simply select the img element and modify its src attribute to be that of the target image, along with the timestamp parameter to ensure it does not access it from the cache.Example: HTML <!DOCTYPE html> <html> <head> <title>Refresh Image</title> </head> <body> <!-- Display the image --> <img id="gfgimage" src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-20.png" width="500" /> <script> // Create a timestamp var timestamp = new Date().getTime(); // Get the image element var image = document.getElementById("gfgimage"); // Adding the timestamp parameter to image src image.src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-20.png?t=" + timestamp; console.log(image.src); </script> </body> </html> Output: Now, even if the image is replaced with a new image it will load the new image. In general, this may have some performance issues as it won’t be using the image from the cache and will have to use the image from the server always.HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples. Comment More infoAdvertise with us Next Article How to Get the Current URL using JavaScript? T tarundhamor Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get the file name from page URL using JavaScript ? JavaScript provides multiple techniques for string manipulation and pattern matching. By demonstrating various methods, the article equips developers with versatile solutions to dynamically retrieve and utilize file names from different URL formats within their applications. There are several approa 3 min read How to convert image into base64 string using JavaScript ? In this article, we will convert an image into a base64 string using Javascript. The below approaches show the methods to convert an image into a base64 string using Javascript.ApproachHere we will create a gfg.js file which will include JavaScript code and one gfg.html file.Now we will put onchange 2 min read How to get the image size (height & width) using JavaScript? To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access 2 min read How to Return the Number of Images in a Document with JavaScript? We will learn how we can return the number of images in a document with JavaScript. We need to access and manipulate the DOM (Document Object Model) of the webpage. The DOM represents the structure of an HTML document as a tree of objects. JavaScript can interact with the DOM to manipulate and retri 3 min read How to Get the Current URL using JavaScript? Here are two different methods to get the current URL in JavaScript.1. Using Document.URL PropertyThe DOM URL property in HTML is used to return a string that contains the complete URL of the current document. The string also includes the HTTP protocol such as ( http://).Syntaxdocument.URLReturn Val 1 min read How to get the file name from full path using JavaScript ? Given a file name that contains the file path also, the task is to get the file name from the full path. There are a few methods to solve this problem which are listed below: JavaScript replace() method: This method searches a string for a defined value, or a regular expression, and returns a new st 2 min read Like