無法在Spring應用程序中顯示圖像

Question

我編寫了一個簡單的Spring + Angular應用程序，只是為了了解更多信息。 我有一個映射到URL的spring控制器，當請求到來時它返回一個圖像。

我已經編寫了所有代碼，並且彈簧控制器將圖像返回給我，但是當我將其設置為HTML時，圖像無法正確顯示

這是我的彈簧控制器

 @RequestMapping(value = "image/", method = RequestMethod.GET)
 public ResponseEntity<byte[]>  getChequeImage(HttpSessionsession,@PathVariable("itemId") Integer itemId,
                                    HttpServletResponse response) {

    try{
        InputStream in =  new FileInputStream(new File("path_to_image.jpg"));

        final HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_JPEG);

        return new ResponseEntity<byte[]>(IOUtils.toByteArray(in), headers, HttpStatus.OK);

    }catch (IOException e){
        LOGGER.error(e);
        e.getMessage(), response);
        return null;
    }


}

這是我的HTML代碼

<img src="{{image}}"/>

image是一個Angular變量。 Angular服務正在發送請求並將數據綁定到image變量

這是角度代碼

@scope.image = "data:image/jpg," + data_from_the_api;

Answer 1

您不能直接在頁面上使用原始圖像字節，但是可以進行Base64編碼，這就是改編

 @RequestMapping(value = "image/", method = RequestMethod.GET)
 public ResponseEntity<String>  getChequeImage(HttpSessionsession,@PathVariable("itemId") Integer itemId,
                                    HttpServletResponse response) {

    try{
        InputStream in =  new FileInputStream(new File("path_to_image.jpg"));

        final HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_JPEG);
        byte[] binaryData = IOUtils.toByteArray(in)
        byte[] encodeBase64 = Base64.encodeBase64(binaryData);
        String base64Encoded = new String(encodeBase64, "UTF-8");
        return new ResponseEntity<String>(base64Encoded , headers, HttpStatus.OK);
    }catch (IOException e){
        LOGGER.error(e);
        e.getMessage(), response);
        return null;
    }
}

正如TechMa9iac在評論中所說，您應該設置@scope.image = "data:image/jpg;base64," + data_from_the_api;