jQuery - Problem with refreshing the image with same name using attr('src',newimage)

Question

I am trying to refresh an image on the page but it is not happening. I have a page with images and I need to update those images as required. To update an image I upload the image on a lightbox and then close the lightbox. The image on the page should update itself. Now, I tried $('#imageid').attr('src', newimage). I want to make a special mention here that the name of both the old and new images are same. And I feel this is the problem. If I hard code any other image it does appear as soon as the lightbox closes. But, when I try to refresh the image by putting the same image name for the 'src' attribute then nothing happens.

Can someone help me out how I can fix this issue and show the updated image.

Thanks.

Edit: Could it be the cache?

Answer 1

There's probably a better solution, but you could just throw on a parameter to force a new image load.

i.e.: Set the src to newImage+"?"+(new Date()).getTime()

Answer 2

If src is "foo.png" and you set src to "foo.png", I think the assignment will probably get optimized out by the browser as a no-op. Have you tried setting src to "", and then setting it to the name? That should register as a change.

Answer 3

This method is a bit complicated one, but is useful only in cases where the name of an image source cannot be changed but the image has to be refreshed on buttonclick(). This is useful while fiddling with codes involving image processiong in browsers.

Step1: Create a container, a div for example.
Step2: Keep the tag in another html file.
Step3: Make an within the container to display the iframe containing the image.

Let the id of the container be '#image' and the id of image be "#img" and id of the iframe be "#cont"

Then do the following within the block where you want to refresh the image with the same name.

$('#image').remove();
$('#cont').remove();
$('#img').append(' <iframe src="add.html" id="cont"></iframe> ');

Below is the code generally inserted within the button click event to change or reload the image, with same name to be specific int his case

<div id="img">
<img id="image" src="uploads/initial_image.jpg"  >
</div>

Below is the HTML with the Iframe which is refreshable.

<img src="effects/intermediate.jpg" id="image">

This segment will ensure that the initial image displayed on the page is removed, and a new iframe which an be refreshed on button click is in place.

Answer 4

The browser does not register any change. So passing random function will force the browser to make changes in the DOM. Below is the jquery and HTML used

$('#uploaded_image').attr('src',data+'?'+Math.random());

<img src="logo.png?1576573831" class="NO-CACHE img-responsive p-b-10" id="uploaded_image">