Edge浏览器图形验证码无法正常显示

最新推荐文章于 2025-03-28 16:41:25 发布

叫我泽西哥好吗

最新推荐文章于 2025-03-28 16:41:25 发布

阅读量4.7k

点赞数 1

分类专栏： js 文章标签： web

本文链接：https://blog.youkuaiyun.com/u013897685/article/details/86562254

版权

js 专栏收录该内容

17 篇文章

订阅专栏

在Edge浏览器中遇到图形验证码无法正常显示的问题，图片通过io流传递到前端img标签无法正常工作。为了解决这个问题，后端采用Base64加密图片流，转化为字符串传递给前端，前端设置img标签的src属性，这样问题得到了解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
其他浏览器显示正常。

			//生成验证码文本
            String capText = captchaProducer.createText();
            logger.info("[{}]生成验证码文本===={}",mobile,capText);
            //利用生成的字符串构建图片
            BufferedImage bi = captchaProducer.createImage(capText);
            ServletOutputStream out = response.getOutputStream();
            ImageIO.write(bi, "jpg", out);
            try {
                out.flush();
            } finally {
                out.close();
            }

io流的形式将图片传到前端用img接收，在Edge浏览器显示

<img src="/resource/images/pic_login_code.jpg" onclick="getCaptcha();" width="80" height="32">

修改处理方案：

			//生成验证码文本
            String capText = captchaProducer.createText();
            logger.info("[{}]生成验证码文本===={}",mobile,capText);
            //利用生成的字符串构建图片
            BufferedImage bi = captchaProducer.createImage(capText);
            ByteArrayOutputStream out = new ByteArrayOutputStream();
            ImageIO.write(bi, "png", out);
            String result = Constants.IMG_BASE64_PREFIX + Base64.getEncoder().encodeToString(out.toByteArray());

后端将图片流用Base64加密生成字符串，在前端用img src接收，然后问题解决

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMmFhYWUwOS01N2VmLWE2NDItYWFjZS05ZjcyYjU0OTYyN2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUIxOTMxRUFCMjgxMTFFOEE4MjA5RTAwMDI1MUQ0MzMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUIxOTMxRTlCMjgxMTFFOEE4MjA5RTAwMDI1MUQ0MzMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzMzI3ZDE2LTI3ZTQtNmE0Ny1iM2FmLTVkYzRiNzhhMDQ0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDplMmFhYWUwOS01N2VmLWE2NDItYWFjZS05ZjcyYjU0OTYyN2MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7KYJRXAAAAhUlEQVR42mL8YQYGBjYg9gDi9wzEAUEg3gHEv5iABCsQmwHxbqgEMZp3Q/WwMQBdIAjEZ/9DwBkonwEHFoSqgavFKUGMZpA4QQWE5IixBa/riPEnXq8RE1h4A5eJgVJAbS9QFIgURSNFCYnipHyCSM3YDDnBCM3O7EDsTkZ2/g0QYAB1zYynyEvFfQAAAABJRU5ErkJggg==