Image not loaded in jQuery load() of a HTML page

Question

I am using following code to load a html page inside a div,

$("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) {
                   if (status == "error") {
                     /* var msg = "Sorry but there was an error: ";
                     $("#error").html(msg + xhr.status + " " + xhr.statusText); */
                     jAlert('Unexpected Error : Please try again later', 'Alert');
                     pageCount--;
                   }
                 });

In the above code I am getting only the HTML text but I am not getting CSS and the images in that page. To get the CSS I added another Ajax request. Without this the page loaded in ajax call will not have the css styles applied.

$.ajax({
            url:"conversion_test/to_convert_3264/style.css",
            success:function(data){
                 $("<style></style>").appendTo("head").html(data);
            }
        })

I am not sure this is the right way to go about it. The problem is I am not getting the images during the ajax call. The images come from conversion_test/to_convert_3264/images folder. Any help is greatly appreciated. Please let me know If I need to give more details.

Thanks in advance.

Answer 1

Will write this as an answer so its a bit more obvious than just the comment thread:

The problem is that the calling page is not located in the same folder as the page being called. The target page references the images with relative paths, and thus when its inserted into the calling page, those references no longer match. In other words, the context of the page has changed.

There are two possible solutions:

1. Use absolute paths for the images so that the context doesn't matter.
2. Use jQuery to fix the paths in the received html (Dilip came up with the code for this himself in his answer).

Answer 2

I finally fixed based on the @MiikaL suggestion. Following is my code to solve the problem.

function replaceImageSource() {
       $("img").each( function(){
              $(this).attr({
                 src: 'conversion_test/to_convert_3264/' + $(this).attr('src')
              });
            });
    }

Hope this helps some one. Thanks for all your help.