Retrieve image using spring boot and angular 9 problem

Question

i have problem with getting image from spring boot (webapp/images) to angular 9 using api rest and spring security jwt. when i save my image it work ... i found it in the folder webapp/images but when i try to get the image i have problem with showing it Here is my code.

Saving image:

 //region Save UserProfile
@PostMapping
public ResponseEntity<?> createUserProfile(@RequestParam("file") MultipartFile file,  @Valid @RequestParam("userProfile") String userProfile)throws Exception{

    boolean isExit = new File(context.getRealPath("/Images/")).exists();
    if (!isExit)
    {
        new File (context.getRealPath("/Images/")).mkdir();
        System.out.println("---Folder Was Created---");
    }
    String filename = file.getOriginalFilename();
    String newFileName = FilenameUtils.getBaseName(filename)+"."+FilenameUtils.getExtension(filename);
    File serverFile = new File (context.getRealPath("/Images/"+File.separator+newFileName));
    try
    {
        System.out.println("Image");
        FileUtils.writeByteArrayToFile(serverFile,file.getBytes());

    }catch(Exception e) {
        e.printStackTrace();
    }

    UserProfile userProfileMapper = new ObjectMapper().readValue(userProfile, UserProfile.class);

    userProfileMapper.setUrlImage(newFileName);
    UserProfile newUserProfile=iCommonService.save(userProfileMapper);
    return new ResponseEntity<>("UserProfile was saved",HttpStatus.CREATED);
}
//endregion

Spring boot controller:

//USERPROFILE_IMAGE_BY_USER_UID= "/imageuserprofile/{userprofileuid}"
@GetMapping(path = APIName.USERPROFILE_IMAGE_BY_USER_UID)
public byte[] getPhoto(@PathVariable("userprofileuid") String userprofileuid) throws Exception{
    UserProfile userProfile   = iCommonService.findByUid(userprofileuid);

    if(userProfile == null){
        throw new CommonServiceException("User profile uid not found");
    }
    return Files.readAllBytes(Paths.get(context.getRealPath("/Images/")+userProfile.getUrlImage()));
}

Angular Service

  private baseUrl = 'http://localhost:8080/userprofile';
  public host :string = "http://localhost:8080";
  
  getUserProfileImage(uid: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/imageuserprofile/${uid}`);
  }

My Component

constructor(
public userProfileService: UserProfileService,
) {}


getImageUserProfile() {
this.userProfileService
  .getUserProfileImage(this.userProfileUid)
  .subscribe((image) => {
    this.imageUserProfile =image;
  });
}

In the Template i try with :

<img
      class="profile-user-img img-responsive img-circle"
       [src]= "'data:image/png;base64,'+imageUserProfile"
      alt="User profile picture"
    />

this give me (data:image/png;base64,undefined:1 GET data:image/png;base64,undefined net::ERR_INVALID_URL)

Or

<img
      class="profile-user-img img-responsive img-circle"
       [src]= "imageUserProfile"
      alt="User profile picture"
    />

this give me ("Unexpected token � in JSON at position 0")

also i try with

<img
      class="profile-user-img img-responsive img-circle"
       src= "{{this.userProfileService.host+'/userprofile/imageuserprofile/'+userProfileUid}}"
      alt="User profile picture"
    />

this give me (GET http://localhost:8080/userprofile/imageuserprofile/2SGI2U8WXUVSfMdgZqhQrok66wLaU03y 403)

can some tell me what is im doing wrong or what.

thanks in advenced.

Harshith · Accepted Answer · 2020-07-22T13:21:03.320

There are two things to be corrected here:

You are probably getting a 403 error because you are not passing the jwt auth token that is required in the headers of the http.get() request. I could tell certainly only if you share the code related to spring security where you have overridden default spring boot security config for implementing your jwt security.

Your http.get() should probably look something like this.

private baseUrl = 'http://localhost:8080/userprofile';
  public host :string = "http://localhost:8080";
  
  getUserProfileImage(uid: string): Observable<any> {
    headers:HttpHeaders=new HttpHeaders().set(<jwt header name>,<token value>)
    return this.http.get(`${this.baseUrl}/imageuserprofile/${uid}`,{headers:headers});
  }

Coming to the second part about how to properly process and display the image you receive from angular http.get(), this stack answer will help you GET data:image/png;base64,{{image}} net::ERR_INVALID_URL

Retrieve image using spring boot and angular 9 problem

1 Answers1