0

I am developing a web application using Angular 7, Spring Boot and PostgreSql.
In spring boot, i have a class Employee which have many attributes including an attribute which is profilePicture that has byte[] type.
All the other attributes works fine and are displayed but my probleme is that the profile isn't displaying.
I tried everything, converting byte array to Base64 by adding data:image/jpeg;base64, or to Blob then to Base64 using atob function : 

dataURItoBlob(dataURI) {
const byteString = window.atob(dataURI);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
  int8Array[i] = byteString.charCodeAt(i);
}
const blob = new Blob([int8Array], { type: 'image/jpeg' });
return blob;
}

where dataURI is byteArray that i receive from json web service. but Nothing worked for me. Before i added profilePicture attribute in database, i was getting the images directly from server using this function : 

createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener('load', () => {
  this.avatarImgSrc = this.domSanitizationService.bypassSecurityTrustUrl(reader.result.toString());
  this.domSanitizationService.sanitize(SecurityContext.URL, this.avatarImgSrc);
}, false);

if (image) {
  reader.readAsDataURL(image);
}
}

Can anyone help me ?

Update :

This is the what display in the console :

enter image description here

Hamza Torjmen
  • 250
  • 1
  • 2
  • 10
  • Have you checked whether you are getting the bytes into your client-side properly? – k9yosh Mar 15 '19 at 09:18
  • Yes, I updated my post there is the format that returns it from webservice – Hamza Torjmen Mar 15 '19 at 09:44
  • May be you need to create an Image and put there base64 data as source, like described there https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery . Have you tried this ? – Telman Mar 15 '19 at 10:02

0 Answers0