Display List of images from database using Spring mvc and Angular JS

Question

I have displayed image using api call.So no issue in retreiving single image.But I need to display entire tables images from database with its name saved in table.

So as far as I know,As I am very new to AngularJs.I can achieve this using ng-repeat when returned as list object.

So I am returning list object from server side.Where Image is converted to base64 pattern and list is sent. But I am not getting any response to AngularJs repository also.

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

But I need to display image in this way.As i need to retreive more than 10 images at one request.

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

But after changing server side code, i.e when returning list or base64 response is not at all hitting angularJs .

Any help will be greatly Thank full.

Hema · Accepted Answer · 2017-05-19 05:01:50Z

I have resolved this,Posting answer if in case anyone needs it.

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>

Collectives™ on Stack Overflow

Display List of images from database using Spring mvc and Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related