deleting and replacing image file but still showing old image

Question

I have a script which is used to delete/update image files, which are displayed.

The problem is, they are being deleted, and replaced (when I check in the particular directory), BUT the image being shown at that particular url is still the old one.

I.e I after deleting the old file (1.jpg, which was gray), this is what the directory looks like:

BUT, the url is still showing 1.jpg as the old gray img, i.e

Now, you might think that I am looking up a wrong url and adding/edeting another file, but just to confirm, I added a foo.html file in the same directory to and replaced 1.jpg with foo.html to confirm that I was in the correct directory, and I was.

My script for editing replacing the file is this:

if(!empty($_FILES["pic".$ite]["name"])){
        if($id){
            unlink($path."$ite.jpg");
           
        }
        $ext = pathinfo($_FILES['pic'.$ite]['name'], PATHINFO_EXTENSION);
        $config["file_name"]="$ite.jpg";
        $this->transfer.="$ite.$ext";
        $this->upload->initialize($config);
        
        
        if(!$this->upload->do_upload("pic".$ite)){
            $this->transfer.=lang('msg_errorimage').' '.$ite;
        }
        }

---

I just renamed the folder from "3" to "3a", then opened the link to the image and got a 404 error, then changed the name of the folder back to "3" from "3a" and now the correct image is showing.

Answer 1

place some parameters after the file extension when trying to load the image,

e.g 1.jpg?t=<?=time()?>

because sometimes browser cache the data so if you load file with the same name
it will load the cache not the real file.

even in the js file sometimes if you change some line of code in your js file it wil
not take effect the changes that you have made, you need to force refresh the cache for you
to see the changes, its either ctrl+F5 or just place parameter after file extension

e.g : jsfile.js?t=<?=time()?>

Answer 2

option 1 : clean cache (CTRL+F5 to force page load from server), option 2 : choose unique file names if possible.

note that option 1 will cause the whole page to reload from the server while option 2 will load only the new image.