Dynamically inserting an image with JavaScript does not work on images that 302 redirect

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

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?

Answer 1

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

If you load up the image in javascript, it will just look like a dead url and will throw an error when you try to load it.

What I did was create a page that receives a URL for the image in the querystring, reads the image, and outputs 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);
    }
}

This appears to successfully load the image and display it, 302 redirect and all... There is no way, that I know of anyhow, to do this without some work on the server side.

If you can't use .NET, but can use another language, or if you can't use any other language at all, let me know...

Answer 2

direct assigning the image url wont work, you have to make first image object in javascript see below :

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

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