title: Dynamically inserting an image with JavaScript does not work on images that 302 redirect
body: <p>I am dynamically inserting an image into an HTML document using jQuery. Here is the code:</p>
  
  <pre><code>var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
  var $image = $('&lt;img src="'+image_url+'" width="50" height="50" /&gt;');
  $('body').prepend($image);
  </code></pre>
  
  <p><strong>Notice that the image <code>http://www.kottke.org/plus/misc/images/castro-pitching.jpg</code> is actually a 302 redirect to <code>http://kottkegae.appspot.com/images/castro-pitching.jpg</code>.</strong></p>
  
  <p>If you were to go to the original image in your browser, it works fine. If you were to load an HTML page with that image in an <code>img</code> tag, it would load fine.</p>
  
  <p>However, if you were to insert it dynamically using jQuery (or JavaScript, for that matter), the browser will not show the 302'ed image. </p>
  
  <p>If you show the redirected image, it would work fine.</p>
  
  <pre><code>var image_url = "http://kottkegae.appspot.com/images/castro-pitching.jpg";
  var $image2 = $('&lt;img src="'+image_url+'" width="50" height="50" /&gt;');
  $('body').prepend($image2);
  </code></pre>
  
  <p>That's crazy, right? What gives and how can I force the image to load when inserted dynamically?</p>