I have a list of items in my database. Each item has some entities and one of them is ImageFileName. This ImageFileName represents the file and its extension. I want to loop through the database and render all the images along with their other entities.
The Html is:
<div class="col-md-4 card mt-3" *ngFor="let post of specialPosts">
<div class="bg-image hover-overlay">
<img [src]="GetImage(post.imageFileName)" class="card-img-top" [alt]="post.title" />
</div>
The component related to this Html is:
export class SpecialPostComponent implements OnInit {
constructor(private postService: PostService) { }
specialPosts: Post[] = [];
ngOnInit(): void {
this.GetSpecialPost();
}
GetSpecialPost() {
this.postService.GetSpecialPost().subscribe(
response => {
this.specialPosts = response;
}
);
}
CreateImageFromBlob(image: Blob) {
let reader = new FileReader();
if (image != null) {
reader.readAsDataURL(image);
reader.addEventListener("load", () => {
return = reader.result;
}, false);
}
}
GetImage(filename: string) {
this.postService.GetSpecialPostImage(filename).subscribe(
response => this.CreateImageFromBlob(response)
);
}
}
The service used for connecting to API is:
export class PostService {
constructor(private http: HttpClient) {
}
GetSpecialPost(): Observable<Post[]>{
return this.http.get<Post[]>(url.baseURL + '/posts/getspecialpostslist');
}
}
GetSpecialPostImage(filename: string): Observable<Blob>{
return this.http.get(url.baseURL + '/posts/getspecialpostimage?filename=' + filename, {"responseType": "blob"});
}
}
The model:
export interface Post{
id: number,
title: string,
description: string,
creationDate: string,
isSpecialPost: boolean,
isMainPost: Boolean,
isActive: boolean,
imageFileName: string,
name: string
}
The problem is that when I build the project, CPU usage reaches 87% and the browser gets unresponsive and no images are delivered to the browser.
How can I loop through images while the images come from API?
What I have tried:
I provided all the codes above.