How to loop through images in angular?

Question

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 24-May-22 5:42am

Code4Ever

Updated 27-May-22 6:14am

v5

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Code4Ever · Answer 1 · 2022-05-27T06:14:00

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();
      }
    });
  }
}