Home/ Questions/Q 3844744
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T16:08:14+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Turns out the reason this works under Firebug is that the website was preventing hotlinking. So forcing the image to load in the console worked fine, but hotlinking wouldn’t work. 302 redirects are followed correctly by the browser, even for images. Hard to debug because it worked fine when debugging. Argh.

    • 0