Javascript 使用SpringMVC和AngularJS显示数据库中的图像列表

我使用api调用显示了图像。因此

检索单个图像时没有问题

。但我需要

显示数据库中的整个表图像

，其名称保存在表中

据我所知，因为我对AngularJs非常陌生。当作为列表对象返回时，我可以使用

ng repeat

来实现这一点

所以我从服务器端返回list对象，其中图像被转换为

base64

模式，列表被发送。 但我对AngularJs存储库也没有任何回应

Controller.java

@RequestMapping(value = "/imageDisplay", method = RequestMethod.GET)
public List<ImageUpload> showImage(HttpServletResponse response, HttpServletRequest request)
        throws ServletException, IOException {

    int id = 1;
    List<ImageUpload> imageUploadList = loginService.getItemImageDetail(id);
    ImageUpload imageUpload = imageUploadList.get(0);
    System.out.println("Image::"+imageUpload.getImage()); //data:[B@f8b2f3
    List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
    for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
    String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
    // base 64 sequence::: 9j/4AAQSkZJRgABAQEASABIAA
        ImageUpload imagepath = new ImageUpload();
        imagepath.setImagePath(base64Encoded);
        imageListForUi .add(imagepath);
    }
    return imageListForUi; // I have list of size 1
}

@RequestMapping(value ="/showImage", method = RequestMethod.GET)
@ResponseBody
public List<ImageUpload> getStateList(HttpServletResponse response, HttpServletRequest request) {
    List<ImageUpload> imageUploadList = loginService.getStateList();
    System.out.println(imageUploadList);
    List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
    for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
        String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
        ImageUpload imagepath = new ImageUpload();
        imagepath.setImagePath(base64Encoded);
        imageListForUi.add(imagepath);
    }
    return imageListForUi;
}

Repository.js

 scope.getImage=function(id){
      alert("In image Display class");
          Repository.getImage(id).then(
          function(response){
              alert("Response:"+response)
              scope.image=response.data;
              alert("Image data::"+scope.image);
              })
        };

this.getImage = function(){
                            var defer = $q.defer();
                            var imagePromise =  http.get('/AB1.2/imageDisplay');
                            imagePromise.then(function(response){
                                    imageList =response;
                                    alert(imageList);
                                    defer.resolve(imageList);
                            });
                        return defer.promise;
                        };

getImageList();
function getImageList() {
AnalyserRepository.getImageList().then(
function(result) {
alert("Result::"+result)
scope.imageList = result;
console.log("Image "+ scope.imageList);
});
};

this.getImageList = function(){
var defer = $q.defer();
    var imageListPromise =  http.get('/projectName/showImage');
    imageListPromise.then(function(result){ 
        imageList = result.data;    
        defer.resolve(imageList);
    });
return defer.promise;
};

Demo1.html

//Initially if i call like this image was displaying.

<img data-ng-src="/AB1.2/imageDisplay"  style="width: 200px;">

<ul>
 <li ng-repeat="image in imageList">
     <img data-ng-src="data:image/jpeg;base64, {{image.imagePath}}" alt="image" style="width: 200px;">
 </li>
</ul>

//最初，如果我像此图像所显示的那样调用。

但我需要以这种方式显示图像，因为我需要一次检索10多张图像

<img data-ng-src="data:image/jpeg;base64,{{image}}" alt="image">

但在更改服务器端代码后，即返回list或base64时，angularJs根本不会响应

---

任何帮助都将不胜感激。

我已经解决了这个问题，如果有人需要，我会发布答案

Controller.java

@RequestMapping(value = "/imageDisplay", method = RequestMethod.GET)
public List<ImageUpload> showImage(HttpServletResponse response, HttpServletRequest request)
        throws ServletException, IOException {

    int id = 1;
    List<ImageUpload> imageUploadList = loginService.getItemImageDetail(id);
    ImageUpload imageUpload = imageUploadList.get(0);
    System.out.println("Image::"+imageUpload.getImage()); //data:[B@f8b2f3
    List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
    for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
    String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
    // base 64 sequence::: 9j/4AAQSkZJRgABAQEASABIAA
        ImageUpload imagepath = new ImageUpload();
        imagepath.setImagePath(base64Encoded);
        imageListForUi .add(imagepath);
    }
    return imageListForUi; // I have list of size 1
}

@RequestMapping(value ="/showImage", method = RequestMethod.GET)
@ResponseBody
public List<ImageUpload> getStateList(HttpServletResponse response, HttpServletRequest request) {
    List<ImageUpload> imageUploadList = loginService.getStateList();
    System.out.println(imageUploadList);
    List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
    for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
        String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
        ImageUpload imagepath = new ImageUpload();
        imagepath.setImagePath(base64Encoded);
        imageListForUi.add(imagepath);
    }
    return imageListForUi;
}

Repository.js

 scope.getImage=function(id){
      alert("In image Display class");
          Repository.getImage(id).then(
          function(response){
              alert("Response:"+response)
              scope.image=response.data;
              alert("Image data::"+scope.image);
              })
        };

this.getImage = function(){
                            var defer = $q.defer();
                            var imagePromise =  http.get('/AB1.2/imageDisplay');
                            imagePromise.then(function(response){
                                    imageList =response;
                                    alert(imageList);
                                    defer.resolve(imageList);
                            });
                        return defer.promise;
                        };

getImageList();
function getImageList() {
AnalyserRepository.getImageList().then(
function(result) {
alert("Result::"+result)
scope.imageList = result;
console.log("Image "+ scope.imageList);
});
};

this.getImageList = function(){
var defer = $q.defer();
    var imageListPromise =  http.get('/projectName/showImage');
    imageListPromise.then(function(result){ 
        imageList = result.data;    
        defer.resolve(imageList);
    });
return defer.promise;
};

Demo.html

//Initially if i call like this image was displaying.

<img data-ng-src="/AB1.2/imageDisplay"  style="width: 200px;">

<ul>
 <li ng-repeat="image in imageList">
     <img data-ng-src="data:image/jpeg;base64, {{image.imagePath}}" alt="image" style="width: 200px;">
 </li>
</ul>