Angular中无法显示JSON API返回图片的问题求助

你已经成功搞定了数据获取和文本展示，就差图片加载这最后一步啦！问题的核心很明确：API返回的logo字段是相对路径，浏览器无法识别该从哪个域名加载这张图片，直接使用这个路径的话，它会默认以你当前Angular项目的域名（比如localhost:4200）去请求资源，自然找不到对应的图片。

下面给你两种简单可行的解决方法，选你觉得顺手的就行：

方法1：在组件中预处理完整图片URL（推荐） #

这种方式能让模板代码更简洁，也方便后续维护（比如API域名变更时只需要修改一处）。

修改你的component.ts代码，在获取数据后为每个团队对象拼接完整的图片URL：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// 可选：如果用环境变量管理域名，先导入
// import { environment } from '../environments/environment';

teams = [];
responseData: any;
constructor(private http: HttpClient) { }

ngOnInit(): void {
  const apiBaseUrl = 'https://api.squiggle.com.au'; // 或者用 environment.apiBaseUrl
  this.http.get("https://api.squiggle.com.au/?q=teams").subscribe((res: any) => {
    // 遍历数组，给每个team添加带完整域名的logoUrl字段
    this.responseData = res.teams.map(team => ({
      ...team,
      logoUrl: `${apiBaseUrl}${team.logo}`
    }));
  }, err => {
    console.log(err);
  }, () => {
    console.log(this.responseData);
  })
}

然后修改HTML模板，使用新的logoUrl字段，同时注意属性绑定不需要加插值表达式（之前的[src]="{{team.logo}}"写法是错误的，[src]直接绑定变量即可）：

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

方法2：直接在模板中拼接URL #

如果不想修改组件逻辑，也可以直接在HTML模板里拼接完整路径：

<tr *ngFor="let team of responseData">
  <td>{{team.id}}</td>
  <td>{{team.abbrev}}</td>
  <td><img [src]="'https://api.squiggle.com.au' + team.logo" alt="{{team.name}} logo"></td>
  <td>{{team.name}}</td>
</tr>

额外注意点 #

• 修正[src]的绑定方式：[src]是Angular的属性绑定语法，内部直接写变量或表达式即可，不需要再套{{}}，否则会导致解析错误。
• 推荐将API基础域名放到environment.ts文件中，这样后续如果域名变更，只需要修改这一处配置即可，更符合Angular的最佳实践。

内容的提问来源于stack exchange，提问作者Shubham