Loading html with ajax, and relative paths

I use ajax to load html files when the links on my page are clicked. Here is the simplified version of what's going on:

links.click(function () {
    var href = $(this).attr("href");
    history.pushState(null, null, href);
    $.get($(this).attr("href"), function(data){
        $("#page").html(data)
    })
});

This works fine. However, the loaded .html files contain a lot of images with relative paths, as follows:

<img src="smiley.gif">

Therefore, when the files are loaded, the text of the page is okay but none of the relative content is being loaded properly. Creating my images with absolute paths solve my problem however I need them to be relative for my current case.

As you've noticed I've modified the address bar by using history.pushstate in my click event function. I assumed that the loaded url would load all of the resources properly as the url is also modified. However, it's not working like that with the code above.

What can I do to fix this issue in an elegant and simple way?