title: url for img tag in ajax loaded html
body: <p>I'm loading an html file with jQuery's get method, and placing the whole body content into the DOM, again with jQuery.</p>
  
  <p>There are lots of img tags inside this html content that I'm loading.</p>
  
  <p>For instance,</p>
  
  <pre><code>&lt;img src="warning.png"&gt;
  </code></pre>
  
  <p>warning.png is in the same directory with the html file on the server.</p>
  
  <p>The directory structure on the server is like this</p>
  
  <pre><code>/myapp/myfolder/content.html
  /myapp/myfolder/warning.png
  </code></pre>
  
  <p>On a mobile browser with LTE connection, the images inside this html content cannot be loaded. </p>
  
  <p>However, when I change the src attribute of the img element to an absolute url as you can see below</p>
  
  <pre><code>&lt;img src="/myapp/myfolder/warning.png"&gt;
  </code></pre>
  
  <p>the image is always loaded properly no matter what connection I'm using. (LTE / 3G / wifi / whatever)</p>
  
  <p>I can of course replace src attribute for every single img element with an absolute value. However, it becomes a maintenance hell after a while, for sure.</p>
  
  <p>I think this has something to do with the relationship between the connection speed and the async loading of the html content from the server.</p>
  
  <p>Does anybody have any idea about this?</p>