Onscroll more image is not loading

I am using news api so first loading 5 articles so once scroll then more articles load but only text is showing no image show on scroll.

image

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let article of data?.articles" (click)="onGoToNewsSinglePage(article)">
    <ion-img [src]="article.urlToImage"></ion-img>

    <ion-card-content>
      <ion-card-title>{{article.title}}</ion-card-title>

      <!-- <p>{{article.description}}</p> -->
      <p class="date">{{article.publishedAt | date:'medium'}}</p>
    </ion-card-content>
  </ion-card>

  <ion-infinite-scroll (ionInfinite)="loadMoreNews($event)">
    <ion-infinite-scroll-content loadingSpinner="bubble" loadingText="Loading More.."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
export class Tab1Page implements OnInit {
data: any;
page = 1;
constructor(private newsService: NewsService, private router: Router) {}
ngOnInit() {
this.newsService
.getData(
  `everything?domains=wsj.com,nytimes.com&pageSize=5&page=${
    this.page
  }`
)
.subscribe(data => {
  console.log(data);
  this.data = data;
});
}
onGoToNewsSinglePage(article) {
  this.newsService.currentArticle = article;
  this.router.navigate(['/news-single']);
}
loadMoreNews(event) {
  this.page++;
  // console.log(event);
  this.newsService
    .getData(
      `top-headlines?country=in&pageSize=5&page=${
        this.page
      }`
    )
    .subscribe(data => {
      // console.log(data);
      // this.data = data;
      for (const article of data['articles']) {
        this.data.articles.push(article);
      }
      event.target.complete();
      // console.log(this.data);
    });
}

doRefresh(event) {
  setTimeout(() => {
    this.newsService
    .getData(
      `top-headlines?country=in&pageSize=5&page=${
        this.page
      }`),
    event.target.complete();
  }, 2000);
}
}

Did you find any solution? I’m facing the same issue.

Try using good ol’ <img> rather than the lazy-loading <ion-img> and see if that does it. The lazy loading is calculated based on visibility, which changes as you scroll, and I’ve found it flaky to scroll lazy loaded images programmatically as they aren’t recalculating visibility well when doing so.