We are retreiving the images from the server. And response type is Blob and then we are converting it to base64 string and binding it to src of ion-img.
ion-img tag is working fine in web browser. But after building APK, Images are not appearing.
We have tried with dom sanitizer resolution also but that didn’t work as well.
Need your help!
Here is the code.
------ component.ts file -------
for (let i = 0; i < this.itemMasters.length; i++) {
if (this.itemMasters[i].attachment_path != null) {
let headers = {};
const imgType = this.itemMasters[i].attachment_path.match(/png|jpeg|jpg/)[0];
headers = Object.assign(headers, loginData['tokens']);
const getResponse = this.commonRestService.downloadFileFromS3Bucket(this.itemMasters[i].attachment_path, headers);
const readFile = new FileReader();
getResponse.forEach(fileBlob => {
readFile.readAsDataURL(fileBlob);
readFile.onloadend = () => {
let base64Img = readFile.result.toString();
base64Img = base64Img.split(',')[1];
base64Img = 'data:image/' + imgType + ';base64,' + base64Img;
this.itemMasters[i].attachment_path = base64Img;
}
});
}
------ .html ------
<ion-img [src]="item.attachment_path" class="each-image"
*ngIf="item.attachment_path != null" style="height: 163px;"></ion-img>
In browser --------
In Mobile Apk ------
