使用 Spring mvc 和 Angular JS 显示数据库中的图像列表答案

【问题标题】：Display List of images from database using Spring mvc and Angular JS使用 Spring mvc 和 Angular JS 显示数据库中的图像列表
【发布时间】：2017-05-18 07:12:46
【问题描述】：

我已经使用 api 调用显示了图像。所以no issue in retreiving single image。但我需要将其名称保存在表中的display entire tables images from database。

据我所知，由于我对 AngularJs 很陌生。当作为列表对象返回时，我可以使用 ng-repeat 来实现这一点。

所以我从服务器端返回列表对象。图像转换为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
}

ImageUpload.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);
              })
        };

Repository.js

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;
                        };

Demo1.html

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

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

但我需要以这种方式显示图像。因为我需要一次请求检索 10 多个图像。

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

但是在更改服务器端代码后，即返回列表或 base64 响应时根本没有命中 angularJs。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript java angularjs spring image

【解决方案1】：

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

Controller.java

@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;
}

Image.js

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

Repository.js

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

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

【讨论】：