How to change the image cshtml.

Question

I am using several images on the home page of my project. The path of which is always using the same name. That is, even if the image changes, the image path remains the same.

The problem is that when I upload the image for the first time, the correct image is displayed. But if I change the image, the previous image is still displayed. If I turn off the PC and start it, the new image is displayed.

 <div class="rwo">          
    {           <div class="collec_3">
             <img src="~/Contain/websiteimage/WebsiteAllimge/@(shift.Path)" alt="Image Not Set">
                 <div class="imagdiv">
                     <p class="webdiscription">Prodcut:@(shift.productname)</p>                                             
                 </div>
             </div>
         } 
  </div><!-- Rwo div close -->
  @foreach (var shift in ViewBag.prodcut)      
 public IActionResult Updatedata(tbl_websiteimage np)
        {
            try
            {
        // Delete Old image Same Name
                if (np.Path !=null)
                {
                    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\Contain\\websiteimage\\WebsiteAllimge", np.Path);
                    if (System.IO.File.Exists(path))
                    {
                        System.IO.File.Delete(path);
                    }
                }
//Update New Image Same Name
                var data = _context.tbl_Websiteimages.Where(e => e.imageid == np.imageid).SingleOrDefault();
                data.nameofimage = np.nameofimage;
 data.productname = np.productname;
                string uniquefilename = string.Empty;
                uniquefilename = uplodadimage(np);
                data.Path = uniquefilename;
                _context.tbl_Websiteimages.Update(data);
                _context.SaveChanges();
            }
            catch (Exception ex)
            {
                ModelState.AddModelError(String.Empty, ex.Message);
            }
            return RedirectToAction("index");
        }
 private string uplodadimage(tbl_websiteimage model)
 {
     string uniquefilename = string.Empty;
     if (model.imagepath != null)
     {
         var ext = Path.GetExtension(model.imagepath.FileName);
         string uploadfolder = Path.Combine(environment.WebRootPath, "Contain/websiteimage/WebsiteAllimge/");
         uniquefilename = model.nameofimage+ ext;
         string filepath = Path.Combine(uploadfolder, uniquefilename);
         using (var fileStream = new FileStream(filepath, FileMode.Create))
         {
             model.imagepath.CopyTo(fileStream);
         }
     }
     return uniquefilename;
 }

Answer 1

Hi jewel!

You’re running into a browser caching issue. When you upload a new image with the same file name and path, the browser still shows the old image because it’s loading it from its cache. That’s why you only see the new image after restarting your PC (which clears the cache).

#Here is how to fix!:

• Add a query string to your image URL in your .cshtml file.

This makes the browser think it’s a new image every time the query string changes, so it will always fetch the latest version from the server.

##For example, change this:

<img src="~/Contain/websiteimage/WebsiteAllimge/@(shift.Path)" alt="Image Not Set">

#To this:

<img src="~/Contain/websiteimage/WebsiteAllimge/@(shift.Path)?v=@(shift.LastUpdated.Ticks)" alt="Image Not Set">

• Here, shift.LastUpdated should be a property in your model that you update every time the image changes (for example, set it to DateTime.Now when you upload a new image).

#If you don’t have a LastUpdated property, you can use a random number or the current time, like this:

<img src="~/Contain/websiteimage/WebsiteAllimge/@(shift.Path)?v=@(DateTime.Now.Ticks)" alt="Image Not Set">

• The browser sees the URL as different each time (because of the ?v=... part), so it fetches the new image from the server instead of using the cached one.

Hope this helps!

Answer 2

when I upload the image for the first time, the correct image is displayed.

At that time your browser stores the image data in its cache.

But if I change the image, the previous image is still displayed.

Because your browser obtains the image data from its cache as the url remains unchanged.

Therefore, the simplest solution is to delete the cache of browser if change of image is not frequent.

Answer 3

Try something like this:

<img src="~/Contain/websiteimage/WebsiteAllimge/@(shift.Path)?x=@(shift.X)" ...

where X is a value that makes the URL different. It could be a random number or string, or some unique ID.