Question

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

据我所知，因为我是AngularJs.的新手。当以列表对象的形式返回时，我可以使用ng-repeat实现此目的。

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

任何帮助都会非常感谢。

Answer 1

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

<强> Controller.java

/usr/local/bin/android: line 3: /usr/local/Cellar/android-sdk/24.3.4/tools/android: No such file or directory
/usr/local/bin/android: line 3: exec: /usr/local/Cellar/android-sdk/24.3.4/tools/android: cannot execute: No such file or directory

<强> Image.js

@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

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

<强> Demo.html

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

使用Spring mvc和Angular JS显示来自数据库的图像列表

1 个答案: