captcha image coming back a binary data? How to display this?

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

Answer 2

您不能使用该方法加载图像，需要将图像url属性设置为图像生成器的路径。

$('#stickImg').attr('src', 'path/to/image/generator');

Answer 3

我不知道有多少浏览器支持它，但是可以对图像进行base64编码，为它添加前缀（取决于图像格式）“ data：image / png; base64”，并将其用作图像的URI。 。