I'm facing an issue while trying to retrieve products from the NestJS server. Although I am able to fetch the products, the attached images are not displaying. Based on some suggestions from Stack Overflow, it seems that I need to convert the incoming images into their respective formats. However, the problem lies in the fact that I am receiving a complete list of objects instead of just images. To address this, I attempted to extract the images from the data subscribed using the map function. After implementing a conversion logic, I encountered undefined in the Network Panel.
In the screenshot below, you can observe the presence of undefined with text/html type response in the Network tab. Beneath this information, all image paths are visible in the console panel.
https://i.sstatic.net/4G69j.png
In my service.ts file, when setting responseType:'blob' for the get method, I encountered an error, so I refrained from utilizing blob
public getallbooks(): Observable<any> {
return this.httpclient.get(
`${this.API_SERVER}/books`
// {
// responseType: 'blob',
// }
);
}
The component.ts file contains the function for converting images and displaying the product
image!: any;
results?: Book[];
ngOnInit() {
this.apiService.getallbooks().subscribe((data: Book[]) => {
this.results = data;
const arr = this.results?.map((i) => {
return i.coverimage;
});
this.createImageFromBlob(arr);
console.log(this.results);
console.log(arr);
});
}
createImageFromBlob(image: any) {
let reader = new FileReader();
(reader.onload = () => {
this.image = this.sanitizer.bypassSecurityTrustUrl(
reader.result as string
);
}),
false;
if (image) {
reader.readAsDataURL(new Blob([this.image]));
}
}
Below is the HTML code snippet for rendering the images
<div class="grid" *ngFor="let result of results">
<div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
<img
class="image"
[src]="'http://localhost:3000/' + image | safeurl"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>