Impossible to fecth blob image, infinite loop

@trollanfer wrote:

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 !

Posts: 1

Participants: 1

Read full topic