Question

我想在java控制器返回的页面上显示图像。

Java控制器：

 public FileSystemResource RetrieveLogo(@PathVariable("UniqueCode") String Code){

// get image file

return fileSystemResource;
}

在java脚本控制器上，我进行服务调用以获取图像。

Javascript控制器：

$scope.logo = function() {
         rest.retrieveLogoForMerchant({id: 'abcd'}).$promise.then(function(data) {
                            console.log("-------------success--------- " + angular.toJson(data));

                            $scope.logoImage = angular.toJson(data);
                        });
    }

此处控制台打印 -

{ “0”： “”， “1”： “”， “2”： “”， “3”： “”， “4”：“\ U00 .......等}

在Html页面上

<img ng-src="{{logoImage}}" height="100" width="100"/>

在页面图像上显示空白，并在控制台中显示错误 -

http://localhost:9090/%7B%220%22:%22%EF%BF%BD%22,%221%22:%22%EF%BF%BD%22,%2 ... 22％EF％BF％BD％22％22246％22：％22 \ u0007％22％22247％22：％22 \ u0014％22％22248％22：％22 400（不良请求）

建议我，如何正确显示图像。

由于

Answer 1

尝试删除

附近的angular.toJSON方法

$ scope.logoImage = angular.toJson（data）;

还

我认为您通过二进制数据加载图像会附加正确的图像编码数据例如：ng-source = {{data：image / png; base64 ........}}

Answer 2

您需要在Java控制器中设置正确的内容类型，请参阅下面的函数

public void displayImage(HttpServletResponse response, byte[] imageArray) throws ServletException, IOException {
        System.out.println("Inside display Image function");

        if (imageArray != null && imageArray.length > 0) {
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            System.out.println("Image Array is not null :" + imageArray);
            response.setContentType("image/jpeg");
            OutputStream out = response.getOutputStream();
            out.write(imageArray);
            out.flush();
            out.close();
        } else {
           System.out.println("Image is null");
        }
    }

你需要确保在将数据内容设置为img标记之前在数据内容之前附加适当的标题.. @Naveen已经在他的回答中指出了它。基本上你需要有这样的东西

<img src="data:image/png;base64,/*Your data part goes here*//>

在将流分配给img之前，还需要将流编码为Base64。我在jsp中排在下面你可以改变它以满足你的需要..

<img id="userProfileImg" height="150px" width="150px"  name="userProfileImg" alt="../img/user_default_pic.png" src='data:image/jpg;base64,<%=Base64.encode(/*Blob data returned from database*/)%>'/>

Answer 3

为什么不通过http（ajax调用）和成功$scope.logoImage = data获取图像的URL。 data是通过http。

检索到的图片的网址

使用角度js显示图像

3 个答案: