无法在 Angular 中显示来自 JSON API 的图像

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 文件

 <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>

HttpClient 工作正常，除了图像外都能完美显示。图像显示为“/wp-content/themes/squiggle/assets/images/Adelaide.jpg”。我试过将 img 标签与 src[] 一起使用，但似乎没有解决。

Answer 1

我不确定是不是这样，但你不应该使用“[]”和“{{}}” 尝试将 [src]="{{team.logo}}" 切换为 [src]="team.logo"

Answer 2

徽标似乎在域 https://squiggle.com.au 下，而 API 在 https://api.squiggle.com.au/ 下。因此，您可能必须手动连接数组的每个元素的域。我还使用 RxJS pipe 和 map 修改了数据提取。尝试以下

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

另外 URL 绑定到 img 应该使用数据绑定语法 [src]="team.logo" 或数据插值语法 src="{{team.logo}}"。它们不应该混在一起，请注意方括号。

模板

<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>

Answer 3

您不需要使用属性绑定进行插值。

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

应该完成这项工作。

无法在 Angular 中显示来自 JSON API 的图像

Unable to display image from JSON API in Angular

json

httpclient

jsonobjectrequest

angular

angular-httpclient