javascript - 来自rest api的图像/png响应未在浏览器中显示

Question

在显示来自 REST API 的 b64 编码 png 图像响应时，图像图标已损坏。

javascript-

function getcap(){
            var http = new XMLHttpRequest()
            http.open("GET", "http://localhost:8888/newcaptcha",true)
            http.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
            http.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8888");
            http.send()
            http.onload = () => {   
                var resp=unescape(encodeURIComponent(http.responseText));
                var b64Response = window.btoa(resp);
                console.log('data:image/png;base64,'+b64Response);
                document.getElementById("capimg").src =  'data:image/png;base64,'+b64Response;
            }
        }

html-

<div id="newCaptcha" onClick="getcap()" ><h5>new captcha:</h5><img id="capimg" width="30" height ="30"/></div>

b64 encoded response-

服务器代码-

@CrossOrigin(origins = "http://localhost:8080")
    @RequestMapping(value = "/newcaptcha", method = RequestMethod.GET, produces = "image/png")
    public @ResponseBody byte[] getnewCaptcha() {
         try {
                 Random random = new Random();
                 imgkey= random.nextInt(3);
                 InputStream is = this.getClass().getResourceAsStream("/"+captcheMap.get(imgkey)+".png"); 
                 BufferedImage img = ImageIO.read(is);
                 ByteArrayOutputStream bao = new ByteArrayOutputStream();
                 ImageIO.write(img, "png", bao);
                 return bao.toByteArray();   
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
    }

Answer 1

如果我在浏览器中打开图像，附加的 64 位响应似乎并未实际加载图像。 其次，我发现可能导致这种情况的一个问题是 DOM 元素 img 的重新加载，如果它没有被任何框架处理，你可能必须手动干预。要检查这一点，您可以使用本地镜像进行测试并加载它。如果它不起作用，那么你就找到了根本原因。如果是这样，那么这个 base64 响应就是一个问题。 另外，检查控制台是否有任何错误并在此处进行更新。