Click here to Skip to main content
15,395,698 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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;
        // console.log(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.
Posted
Updated 27-May-22 6:14am
v5
Comments
Richard Deeming 25-May-22 4:06am
   
I'm not familiar with Angular, but this line looks wrong:
return = reader.result;

At least in regular Javascript, you can't use the keyword return as a variable name.

1 solution

I solved my problem by the following typescript code:

export class SpecialPostComponent implements OnInit {

  constructor(private postService: PostService) { }

  specialPosts: Post[] = [];

  ngOnInit(): void {
    this.GetSpecialPost();
  }

  GetSpecialPost() {
    this.postService.GetSpecialPost().subscribe(
      response => {
        this.specialPosts = response;
        this.PrepareImages(this.specialPosts);
      }
    );
  }
  PrepareImages(posts: Post[]) {
    forkJoin(
      posts.map(post =>
         this.postService.GetSpecialPostImage(post.imageFileName).pipe(
          mergeMap(async (response: Blob) => {
            post.imageSrc = await this.CreateImageFromBlob(response);
            return post;
          }))
      )
    ).subscribe((posts: Post[]) => {
      this.specialPosts = [...posts];
    });
  }
  CreateImageFromBlob(image: Blob): Promise<any> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => {
        resolve(reader.result);
      }, false);

      if (image) {
        reader.readAsDataURL(image);
      } else {
        reject();
      }
    });
  }
}
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900