I have images stored in a pouchdb table.
I want to include them in my htlm page :
<img [src]="this.sanitizer.bypassSecurityTrustUrl(getImage('png.png'))"/>
getImage is in my page.ts
getImage(file){
this.pouch.getimagepouch(file).then((url)=>{
return url;
});
}
and calls getimagepouch from my dataservice
async getimagepouch(img){
try{
let blob = await this.localdbimages.getAttachment(img, img);
let url = URL.createObjectURL(blob);
return url;
} catch (err){
console.log(err);
}
}
It doesn’t work, I get an infinite loop. The debugger shows that when awaiting the attachement, app.component.ts get called, then getimage, then app.component,…
I tried to store the created url when constructing the dataservice
this.initCloudimage().then((res)=>{
// when the data is synchronized from the server
this.getimagepouch('png.png').then((res)=>{
debugger;
this.imgurl = res;
})
});
and just sending it to the html (without async code)
getimageurl(){
let url = this.imgurl;
return url;
}
this.displayImage = this.sanitizer.bypassSecurityTrustUrl(getImageurl()); is in page.ts
Then, my page.html
<img src="{{displayImage}}>
And it works ! (In fact, there are a few call loops, but it stops after a while…)
Can someone help me ??? Please !
- Is there something to wait (the end of the page building ?) before calling the async function ?
- Why these loops ? Why this problem with async?
THANKS !