JavaScript dynamic image insertion does not work on images that redirect 302

Question

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); 

Note 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 loaded an HTML page with this image in the img tag, it would load normally.

However, if you were to dynamically embed it using jQuery (or JavaScript, for that matter), the browser would not display image 302.

If you show a redirected image, it will 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); 

This is crazy, isn't it? What gives and how can I make the image load on dynamic input?

Answer 1

Turns out the reason this works in Firebug is because the website is preventing hotlinks. So forcing image upload to the console worked fine, but hotlinking didn't work. Redirects 302 are performed correctly by the browser, even for images. It’s hard to debug because it worked great when debugging. Argh.

Answer 2

First of all, my answer will only work if you use ASP.NET (C #), but it can be easily ported to VB.NET, PHP or something like that.

If you load an image in javascript, it will look like a dead url and will cause an error when trying to load it.

What I did was create a page that gets the URL of the image in the query line, reads the image and displays the response.

Webform.aspx

 <script type="text/javascript"> $(document).ready(function () { var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg"; var $image = $('<img src=LoadImage.aspx?imageUrl="' + image_url + '" width="50" height="50" />'); $('body').prepend($image); }); </script> 

LoadImage.aspx (.cs code-Behind)

 using System; using System.Net; public partial class LoadImage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String url = Server.UrlDecode(Request.QueryString["imageUrl"]).Replace("\"", ""); WebRequest req = WebRequest.Create(url); System.Drawing.Image img = System.Drawing.Image.FromStream(req.GetResponse().GetResponseStream()); Response.Clear(); Response.ContentType = "image/jpeg"; img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg); } } 

It is like successfully loading an image and displaying it, redirecting 302 and that’s all ... There is no way that I know, anyway, to do this without some work on the server side.

If you cannot use .NET but can use a different language, or if you cannot use any other language at all, let me know ...

Answer 3

Direct assignment of image url will not work, you have to make the first image object in javascript as below:

 var imgObj = new Image(); imgObj = " ---------- your path goes here----------"; 

now set the imgObj.src property to your dynamic image tag in jquery