When the Value of img src is Changed by a JS Click Event The Value Doesn’t Start Empty?

In JavaScript Technology

When using JavaScript (JS) to first add and then delete an image from the browser it was anticipated that the screen would render clear when leaving the page and then return using the back button.

However when I returned the image was once again present on the screen. This happened despite the fact that the screen is set to start clear, i.e. <img src=""> and before closing the Delete Image button was used to remove the image that was added. For some reason the image was there again.

How to recreate this behavior:

  1. Open Page 1
  2. Choose an image file from your system
  3. JavaScript will set the value of <img src=""> to your image and display it
  4. Click the Delete Image button and the image will be removed
  5. Click the Link To Page Two button
  6. Use the back button on your browser and when you return the image will be on the screen again
  7. If instead of the back button you return with Link To Page One the screen starts fresh without an image

Example of page-one.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    
<body>

    <h1>Page One</h1>
    <p><a href="page-two.html">link to Page Two</a></p>

    <p><img src="" id="theImage"></p>

    <p><input type="file" name="imageFile" accept=".gif,.jpg,.png" id="inputImageFile"></p>

    <button id="theButton">Delete Image</button>

    <script>

        let theImage = document.querySelector('#theImage');
        let inputImageFile = document.querySelector('#inputImageFile');
        let theButton = document.querySelector('#theButton');

        inputImageFile.addEventListener('input', imageUpload);
        theButton.addEventListener('click', deleteImage);

        function imageUpload(e) {

            let uploadedFile = e.target.files[0];

            let forViewing = new Image();
            forViewing.src = URL.createObjectURL(uploadedFile);

            theImage.src = forViewing.src;

        }

        function deleteImage() {

            theImage.src = '';

        }

    </script>

</body>

</html>

Example of page-two.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    
<body>

    <h1>Page Two</h1>
    <p><a href="page-one.html">link to Page One</a></p>

</body>

</html>

Solution [option 1]

The most probable explanation is that the browser remembers last successfully loaded content – when changing the source into empty string the browser has “nothing” to cache so there is a chance the engine of the specific browser (or all of them) leaves the cache unchanged – try changing the source into something like “pixel image” in your deleteImage function like this:

theImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=';

it will load a transparent 1x1px png and probably replace the cached image. …or use the cache controlling headers on the server – to tell the browser not to cache.

Solution [option 2]

In your delete function add this line: inputImageFile.value = '';

It looks like the input plays the role – the value is being cached – and when browser sets the value from cache – the ‘input’ event fires – and the script displays the image.

Click here to view original web page at stackoverflow.com