Cache problem on changing <img> src attr with same file name

1
votes

i'm trying changing dinamically the src path of a img tag

i have:

<img src="img1.jpg">

Then i upload new photo by iframe and new photo takes the same name (img1.jpg) then by ajax i refresh the src path (which is the same but photo is changed)

The problem is that i use same file name, img doesn't change in browser, guessing cause of browser cache...

Is there any jquery,html or php solution on this?

thanks

3
phpjavascriptjqueryhtmlsrc
You could try appending a random query string to the end... img src="img1.jpg?random_string" – AllisonC
Try changing the image to something temporary while it is uploaded, and then switch the src back to the img1.jpg. If that doesnt work, consider using a different image name. – Tejs
@AllisonC your comment should really be an answer instead. – Peter Smith
stackoverflow.com/questions/728616/… – InvisibleBacon
@allison yep Peer is right, your is really an answer and also right answer ;) it works! thx ;) – itsme

3 Answers

4
votes

You could try appending a random query string to the end... img src="img1.jpg?random_string"

2
votes

You could return the image as a base64 string in the ajax response, and append the data to the img element.

<img src="data:image/jpeg;base64,[STRING GOES HERE]" alt=""/>

This way you will save another request. However, the base64-encoding means a few more bytes are transferred.

1
votes

Its been cache issue.To resolve this issue use Math.random() as query param

<img src="url_goes_here?Math.random()" />