How to change entire site’s image path/ URL in few seconds?

If you have the working experiences then you can understand how it’s important when a client request to move all web application’s images in a new folder or location and it can be more painful when the images are uses in more than 100 or 1000 pages.

If we are going to change the images path from 1000 pages then think how much hours involved here, but if we use jQuery code then we can change the entire site images path within few seconds.

May be you know the code, but tricks is more important thing that where or how to use it in proper place.

Let’s see how we can replace the entire site image URL by using jQuery.

$(function() {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("demo/", "images/"));
    });
});

We actually set src attribute of an image tag to a correct location as per requirement. If you want to change a particular page/ area image paths then also you can select the area by using ID or Class same as below code.

 $(function() {
    $("#idName img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("demo/", "images/"));
    });
});

The #idName indicating the used images path of a particular area.

Not only the entire site image path changes, you also can replace image as per requirement by using few lines of jQuery code. Please see below code for this.

$(function() {
    $("img").each(function() {
      $("#changeImg").attr("src", "/images/24xhtml-jquery.jpg");    });
});

The #myimg ID is selecting a area where to replace the image and see the HTML code below get better overview.

<img id=" changeImg " src="/24xhtml-logo.jpg  " alt="24xhtml.com" />