Not able to display image from API's URL in Angular dynamically

Question

as i said in title, i'm using free api for displaying crypto currency news for my practice project. Seems like everything is fine except displaying the images in card view. I will post here my code, so if you have any idea how to fix, please help me.

From the app service:

 getNews(): Observable<any> {
return this._http.get("https://min-api.cryptocompare.com/data/v2/news/?lang=EN")
  .map(result => this.result = result)
  .pipe(catchError(this.handleError('getPriceSingle', [])));

} Controller:

this._data.getNews()
    .subscribe(res => {
    this.receiveData = res.Data 
    let newsObj: any = Object.keys(this.receiveData);
    let newsValues: any = Object.values(this.receiveData);

    for (let i = 0; i < newsValues.length; i++) {
      this.newsX[newsValues[i]] = {
        title: newsValues[i].title,
        url: newsValues[i].url,
        body: newsValues[i].body,
        image: newsValues[i].imageurl,
        date: newsValues[i].published_on,
        tags: newsValues[i].tags
      };
    }

    this.newsData = JSON.parse(JSON.stringify(Object.values(newsValues)));
    console.log(this.newsData)
});

And view:

<nz-layout>
<nz-content>
  <header>
    <h1>Latest Crypto Currency News</h1>
  </header>
  <div class="band">
    <div class="item-7" *ngFor="let news of newsData">
      <a href="{{news.url}}" class="card">
        <div class="thumb">
          <img [src]='news.image' />
        </div>
        <article>
          <h1>{{news.title}}</h1>
          <span>Release Date: {{today | date:'dd/MM/yyyy'}}</span>
        </article>
      </a>
    </div>
  </div>
    </nz-content>

Answer 1

Seeing what you're trying to accomplish, I'd say the back and forth conversions using Object.keys and Object.values aren't required here. Try the following

1. Avoid the subscription in the controller. Use Angular async pipe instead. This also avoids potential memory leaks due to open subscriptions.
2. Use RxJS map operator along with JS Array#map function to transform the data as per your requirement.
3. This is more of a subjective semantic opinion. While binding variables in the template, using the same quotes across all the bindings is more elegant compared to using double for few and single for others like you're doing.

Controller

import { Component } from "@angular/core";

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Component({ ... })
export class NzDemoLayoutFixedComponent {
  newsData$: Observable<any>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.newsData$ = this._data.getNews().pipe(
      map((res: any) =>
        res["Data"].map(item => ({
          title: item["title"],
          url: item["url"],
          body: item["body"],
          image: item["imageurl"],
          date: new Date(item["published_on"] * 1000), // credit: https://stackoverflow.com/a/847196/6513921
          tags: item["tags"]
        }))
      )
    );
  }
}

Template

<ng-container *ngIf="(newsData$ | async) as newsData">
  <nz-layout class="layout">
    <nz-content style="padding:0 50px;margin-top:64px;">
      <header>
        <h1>Latest Crypto Currency News</h1>
      </header>
      <div class="band">
        <div class="item-7" *ngFor="let news of newsData">
          <a [href]="news.url" class="card">
            <div class="thumb">
              <img [src]="news.image" />
            </div>
            <article>
              <h1>{{ news.title }}</h1>
              <span>Release Date: {{ news.date | date: "dd/MM/yyyy hh:mm" }}</span>
            </article>
          </a>
        </div>
      </div>
    </nz-content>
  </nz-layout>
</ng-container>

Working example: Stackblitz