Question

I am retrieving a captcha image from the Java based package “SimpleCaptcha”

On the front end I just put the following in my page and I get a captcha image:

<img src="stickyImg" />

I want to reload this captcha image onclick using javascript.

I tried:

$("#theclickhandler").click(function(){  
    $("#stickyImg").load('stickyImg', function(response){           
       $("#stickyImg").attr('src', response); 
    });
    return false;
});

This gets the image but outputs something like this (greatly shortened obviously):

<img src="captcha image�PNG �ݚ��L�23U�݆�}$�J����Dy����IEND�B`� ">

That looks like raw, binary data to me. How do I get this to work?

Answer 1

The src attribute of an image tag specifies to the browser where the image to load is, not the content of the image. So you’re stuffing the content of the image into the place where you want the location to be, and that’s giving you garbage because it simply doesn’t make sense.

So, to reload the image, you need to tell the browser that the address of the image has changed. It’s not sufficient to simply rewrite the location in the image’s src attribute to the same address — that won’t tell the browser to change anything. You can overcome this by stuffing some random data in the query string, say, the time of the request. Like @mikerobi suggests, you can just rewrite the src tag, here with the modification of putting a timestamp in the query string (which your servlet will almost surely ignore):

$('#stickyImg').attr('src', 'stickyImg?' + (new Date().getTime()));