验证码图像返回二进制数据？如何显示这个？答案

【问题标题】：captcha image coming back a binary data? How to display this?验证码图像返回二进制数据？如何显示这个？
【发布时间】：2010-10-31 02:58:22
【问题描述】：

我正在从基于 Java 的包“SimpleCaptcha”中检索验证码图像

在前端，我只是在我的页面中输入了以下内容，然后我得到了一张验证码图片：

<img src="stickyImg" />

我想在点击时使用 javascript 重新加载此验证码图片。

我试过了：

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

这会得到图像，但会输出类似这样的内容（显然大大缩短了）：

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

对我来说，这看起来像是原始的二进制数据。 如何让它发挥作用？

【问题讨论】：

标签： java javascript binary captcha binary-data

【解决方案1】：

图像标签的src 属性向浏览器指定要加载的图像的位置，而不是图像的内容。因此，您将图像的内容填充到您想要的位置，这给了您垃圾，因为它根本没有意义。

所以，要重新加载图片，你需要告诉浏览器图片的地址已经改变。仅仅将图像的src 属性中的位置重写为相同的地址是不够的——这不会告诉浏览器进行任何更改。你可以通过在查询字符串中填充一些随机数据来克服这个问题，比如请求的时间。就像@mikerobi 建议的那样，你可以重写src 标签，在这里修改在查询字符串中放置一个时间戳（你的servlet 几乎肯定会忽略它）：

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

【讨论】：

令人着迷！我不知道。虽然它对我来说很接近魔法，但它非常有效。感谢您解释这背后的“原因”。

【解决方案2】：

不能用这种方式加载图片，需要将图片的url属性设置为图片生成器的路径。

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

【讨论】：

好吧，在 html 中使用（就像那样）加载图像。所以我想重新加载它我应该使用那个加载方法（在我的例子中）来抓取同样的东西，“stickyImg”。我对java一无所知，所以我如何找到图像生成器的路径，更令我困惑的是，为什么在页面加载时起作用，但在我调用它时却不像在我的加载方法？原谅我，我是一个前端没接触过java的人。
这还不够，如果路径没有改变，你需要在 URL 上添加一些额外的东西。

【解决方案3】：

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

【讨论】：