The standard trick for forcing a browser to reload an image is appending a cache-busting query string (like image.png?t=1690000000). However, this workaround fails when working with strict backend CGI scripts, REST APIs, or signed endpoints that reject unrecognized URL parameters.

If you cannot modify the URL with query parameters or hash fragments, how can you force the browser to fetch a fresh version of the image? Below are the modern, production-tested solutions.

Method 1: Fetch with cache: 'reload' and Object URLs (Recommended)

The cleanest and most robust approach in modern JavaScript is using the fetch() API with the cache option set to 'reload' or 'no-cache'. Once fetched, convert the image to a Blob and assign it using URL.createObjectURL().

async function reloadImageWithoutUrlChange(imgElement) {
  const originalUrl = imgElement.src;

  try {
    // Fetch the image without mutating the URL, bypassing cache
    const response = await fetch(originalUrl, {
      cache: 'reload',
      headers: {
        'Pragma': 'no-cache',
        'Cache-Control': 'no-cache'
      }
    });

    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

    const blob = await response.blob();
    const objectUrl = URL.createObjectURL(blob);

    // Handle memory management by revoking old object URLs if applicable
    imgElement.onload = () => {
      URL.revokeObjectURL(objectUrl);
    };

    imgElement.src = objectUrl;
  } catch (error) {
    console.error('Failed to reload image:', error);
  }
}

// Usage:
const myImg = document.getElementById('dynamicImage');
reloadImageWithoutUrlChange(myImg);

Why this works:

  • The backend receives the exact, clean URL it expects without unrecognized query parameters.
  • The browser's fetch cache is explicitly instructed to ignore cached data and re-request from the server.
  • The DOM element is updated using an in-memory blob reference.

Method 2: Legacy XMLHttpRequest with responseType = 'blob'

If you need compatibility with older browsers where the fetch cache mode is inconsistent, you can achieve the same result using XMLHttpRequest:

function reloadImageXHR(imgElement) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', imgElement.src, true);
  xhr.setRequestHeader('Cache-Control', 'no-cache');
  xhr.setRequestHeader('Pragma', 'no-cache');
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      const newUrl = URL.createObjectURL(xhr.response);
      imgElement.src = newUrl;
    }
  };

  xhr.send();
}

Method 3: Correct Backend HTTP Caching Headers

If your CGI script generates an Expires header, ensure that the browser is configured to revalidate once that time expires. Modern browsers prioritize Cache-Control over legacy Expires headers. Ensure your CGI endpoint outputs:

Cache-Control: no-cache, must-revalidate
Expires: Wed, 21 Oct 2026 07:28:00 GMT

With no-cache or must-revalidate, the browser will make a conditional request (ETag or If-Modified-Since) to check if the image has changed before reusing the cached version.

Summary

When query-string cache busting is not an option, avoid fighting the browser's <img> caching mechanics directly. Instead, retrieve the image data via fetch(url, { cache: 'reload' }), convert the response into a local Object URL, and update the src attribute seamlessly.