gallary show images only when hover or focus on it first time.

[frndxyz]

i am using ngx-gallery with angular 9.1.

i am fetching images from web services and building url attaching it like below:

this.service.getAllImages('5ef814a570f45211f5b2b508').subscribe((res: any) => {
      res.forEach(img => {
        this.galleryImages.push({
          small: `/api/image/get/${img.imageid}/sm`,
          medium: `/api/image/get/${img.imageid}/md`,
          big: `/api/image/get/${img.imageid}`
        });
      });

    });

once i move arrow on gallery it shows images otherwise totally blank.

[sqljim]

Avoid doing the this.galleryImages.push in favour of:

this.galleryImages = res.map(item => { return { small: /api/image/get/${img.imageid}/sm, medium: /api/image/get/${img.imageid}/md, big: /api/image/get/${img.imageid} }});

Anywhere you're adding new records, just replace the existing galleryImages.

[mhubis]

Avoid doing the this.galleryImages.push in favour of:

this.galleryImages = res.map(item => { return { small: /api/image/get/${img.imageid}/sm, medium: /api/image/get/${img.imageid}/md, big: /api/image/get/${img.imageid} }});

Anywhere you're adding new records, just replace the existing galleryImages.

Thank you!

[jijodaniel1995]

Avoid doing the this.galleryImages.push in favour of:

this.galleryImages = res.map(item => { return { small: /api/image/get/${img.imageid}/sm, medium: /api/image/get/${img.imageid}/md, big: /api/image/get/${img.imageid} }});

Anywhere you're adding new records, just replace the existing galleryImages.

Thank you

[andrejm7]

did that fix the problem?