Images not loading in jQuery

Question

I am using jQuery. test.html contains images and text. Now I need to load using test.html

<img src="../images/lib.jpg" alt="test" width="320" height="290" />
<p>Textt </p>

jQuery

$("#content2").load("sub_test.html");

The result of content2 didn't display the images. Is there a better way? Or an alternative solution to display the images and HTML correctly? Is it my tag problem or jQuery?

Answer 1

As the comment stated, it would be helpful to see more of your files.

One possible issue is that, when the img tags from one page are loaded into another, they will resolve based on the page they are loaded into, not based on their original location. So if you had a directory tree like this:

root
   page1.html
   /images
   /dir1
      page2.html

then images in page2.html will have src="../images/something.jpg" while images in page1.html will have src="images/something.jpg". If you're going to load page2.html into page1.html, the image tags in page2.html will have to be rewritten to match the location of page1.html. (Or else use references based on the root: src="/images/something.jpg").