I have the following method within my Angular component:
<li *ngFor="let item of list1._subList" onclick="SelectImage()" class="active">
<img alt="img" [src]="getImage(resp.data_values[0])| secure | async"
/>
<p>{{generateDisplayImgName(item.values[0])}}</p>
</li>
getImage(ficname: string) {
let obj: any;
// remember 5th question represents the zip file name
obj = {"fileName":StringUtil.extractSubstring(5,ficname.length,ficname),"zipFileName":this.something,"terminalTypeId":5}
return this.projectService.extractStudioImage(this.id1,this.id2,this.id3,obj).subscribe((data)=>{
let objectURL = 'data:image/png;base64,' + data;
if(ficname.includes('jpg')){
objectURL = 'data:image/jpg;base64,' + data;
}
console.log(objectURL);
return objectURL;
})
}
Below is the code for my HttpClient.
extractStudioImage(id1,id2,id3,json){
const headers = new HttpHeaders();
let params = new HttpParams();
params = params.set('a1', id1);
params = params.set('a2',id2);
params = params.set('a3',id3);
return this._http.post(ServerAddress.getInstance().getValue() + this.extractStudioPhotoUrl, json,{
headers: headers,
params:params,
});
}
The method works fine as I can see the images in Fiddler. However, the issue arises because Angular keeps trying to parse JSON (the byte representation of my image) even though I am not explicitly attempting to do so.
Upon inspecting with my Chrome debugger, I notice the following error: It is an HttpResponseError
Unexpected token in JSON at position 0
I am not sure what is causing this error in my implementation.