I am dynamically inserting an image into an HTML document using jQuery. Here is the code:

var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
var $image = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image);

Notice that the image http://www.kottke.org/plus/misc/images/castro-pitching.jpg is actually a 302 redirect to http://kottkegae.appspot.com/images/castro-pitching.jpg.

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 img tag, it would load fine.

However, if you were to insert it dynamically using jQuery (or JavaScript, for that matter), the browser will not show the 302'ed image.

If you show the redirected image, it would work fine.

var image_url = "http://kottkegae.appspot.com/images/castro-pitching.jpg";
var $image2 = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image2);

That's crazy, right? What gives and how can I force the image to load when inserted dynamically?