Unable to display image from JSON API in Angular

Question

JSON API

teams": [

    {
        "logo": "/wp-content/themes/squiggle/assets/images/Adelaide.jpg",
        "abbrev": "ADE",
        "name": "Adelaide",
        "id": 1
    },

component.ts

  teams = [];

  responseData: any

constructor(private http: HttpClient) { }

ngOnInit(): void {
    this.http.get("https://api.squiggle.com.au/?q=teams").subscribe((res: any) => {
      this.responseData = JSON.parse(JSON.stringify(res))["teams"];
    },
      err => {
        console.log(err);
      },
      () => {
        console.log(this.responseData);
      }
    )
  }

HTML File

 <tr *ngFor="let team of responseData">
          <td>{{team.id}}</td>
          <td>{{team.abbrev}}</td>
          <td><img [src]="{{team.logo}}" alt="image"</td>
          <td>{{team.name}}</td>
 </tr>

The HttpClient is working fine and display it perfectly except of the images. The image are being displayed as "/wp-content/themes/squiggle/assets/images/Adelaide.jpg". I have tried using img tag with src[] but does not seem to fix.

Barremian · Accepted Answer · 2020-05-19 15:10:03Z

2

It appears the logos are under the domain https://squiggle.com.au whereas the API is under https://api.squiggle.com.au/. So you might have to manually concatenate the domain for each element of the array. I've modified the data extraction as well using RxJS pipe and map. Try the following

IMG_BASE_URL = 'https://squiggle.com.au';

ngOnInit() {
  this.http.get("https://api.squiggle.com.au/?q=teams")
    .pipe(map(teams => {
      const result = teams['teams'];
      result.forEach(team => team['logo'] = this.IMG_BASE_URL + team['logo'] );
      return result;
    }))
    .subscribe(
      res => { this.responseData = res; },
      err => { console.log(err); },
      () => { console.log(this.responseData); }
    );
}

Also the URL binding to img should either be using data binding syntax [src]="team.logo" or data interpolation syntax src="{{team.logo}}". They shouldn't be mixed together, please notice the square brackets.

Template

<tr *ngFor="let team of responseData">
  <td>{{team.id}}</td>
  <td>{{team.abbrev}}</td>
  <td><img [src]="team.logo" alt="image"></td>
  <td>{{team.name}}</td>
</tr>

edited May 19, 2020 at 15:10

answered May 19, 2020 at 15:00

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shubham Over a year ago

works perfect, any tutorial you would recommend related to these types of topics?

Barremian Over a year ago

TBH the logo domain was a bit of guesswork. If you haven't gone through already, Angular tutorial (angular.io/tutorial) is a quick and good introduction to some basics of Angular.

Itay Perri · Accepted Answer · 2020-05-19 14:13:30Z

0

im not sure this is it but you shouldnt use "[]" and "{{}}" try switching [src]="{{team.logo}}" for [src]="team.logo"

answered May 19, 2020 at 14:13

Itay Perri

232 bronze badges

Comments

Aakash Garg · Accepted Answer · 2020-05-19 16:29:35Z

0

you don't need interpolation with attribute binding.

<td><img [src]="team.logo" alt="image"</td>

should do the job.

answered May 19, 2020 at 16:29

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Unable to display image from JSON API in Angular

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related