Convert ByteArray into Image in AngularJs

Question

I have written a controller in spring boot for getting image of particular user and i am returning it in form of byte array

@GetMapping(value = "/images/{id}/{login}",produces = {MediaType.APPLICATION_OCTET_STREAM_VALUE})
    public byte[] getImage(@Valid @RequestParam("id") String id,@RequestParam("login") String login)
        throws IOException, XmlPullParserException, NoSuchAlgorithmException, InvalidKeyException, InvalidArgumentException, ErrorResponseException, NoResponseException, InvalidBucketNameException, InsufficientDataException, InternalException {
        return IOUtils.toByteArray(fileService.getImage(id, login));
    }

Is there a method in angularjs so that i could convert it in form of image So that i could display the profile Picture of User

There's nothing to convert. What you should do, though, is specify the actual content type of the image: image/png, or image/jpeg for example, but certainy not application/octet-stream. All you need is <img src="/path/mapped/to/controller/method" />. — JB Nizet
– JB Nizet, Commented Sep 20, 2017 at 6:41
if you can send image with base64 format; then you can directly include base64 in img src attribute — user1608841
– user1608841, Commented Sep 20, 2017 at 6:53
like this <img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." /> — user1608841
– user1608841, Commented Sep 20, 2017 at 6:54

Trần Quốc Vũ · Accepted Answer · 2017-09-20 08:55:30Z

2

in angularjs you add function

vm.getByte = function(){
  $http({
      method: 'GET',
      url: '/images/{id}/{login}'
  }).success(function(success){
      vm.imgFile = success;
  });
};

to get byte array

and in html

<img ng-src="data:image/JPEG;base64,{{vm.imgFile}}" style="width: 200px;height: 130px;" />

answered Sep 20, 2017 at 8:55

Trần Quốc Vũ

4675 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert ByteArray into Image in AngularJs

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