Ionic 3中img[src]加载部分Facebook头像URL失败问题

我之前也碰到过类似的Facebook Graph API图片加载坑，咱们来拆解下你遇到的问题：

问题根源 #

你提供的失效URL里带了redirect=false参数，这会让Facebook Graph API返回一个JSON对象（Content-Type为application/json），而不是直接返回图片资源。具体来说，这个URL的响应结构大概是这样的：

{
  "data": {
    "height": 200,
    "is_silhouette": false,
    "url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=105656846898488&height=200&width=200&ext=1728xxxxxx&hash=AeQxxxxxx",
    "width": 200
  }
}

• 浏览器直接打开时，因为响应是JSON类型，所以会触发下载而非显示图片
• Ionic的WebView（不管是模拟器还是真实设备）无法自动解析这个JSON并加载里面的实际图片URL，导致图片加载失败

而正常URL能工作，大概率是该用户的头像配置刚好让API忽略了redirect=false参数，直接返回了图片资源（这种情况比较少见，通常还是遵循参数规则）。

两种解决办法 #

方法1：去掉redirect=false参数（最简单） #

直接修改URL，移除redirect=false，让Facebook API自动重定向到图片资源：

https://graph.facebook.com/105656846898488/picture?width=200&height=200&type=normal

这个修改后的URL会直接返回图片（Content-Type为image/jpeg或image/png），不管是Ionic还是浏览器都能正常显示，也不会触发下载。

方法2：手动解析JSON获取实际图片URL（适合必须保留redirect=false的场景） #

如果你因为某些需求必须保留redirect=false，可以通过HTTP请求先获取JSON里的图片URL，再赋值给img的src。这里给一个Ionic/Angular的示例：

1. 在组件中编写请求逻辑：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html'
})
export class AvatarComponent {
  avatarSrc: string = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadAvatar();
  }

  private loadAvatar() {
    const apiUrl = 'https://graph.facebook.com/105656846898488/picture?width=200&height=200&redirect=false&type=normal';
    this.http.get(apiUrl).subscribe((res: any) => {
      if (res.data?.url) {
        this.avatarSrc = res.data.url;
      } else {
        // 处理头像加载失败的情况，比如用默认头像
        this.avatarSrc = 'assets/images/default-avatar.png';
      }
    }, (err) => {
      console.error('加载头像失败:', err);
      this.avatarSrc = 'assets/images/default-avatar.png';
    });
  }
}

2. 在模板中使用：

<img [src]="avatarSrc" alt="用户头像" width="200" height="200">

总结 #

优先推荐方法1，既简单又能避免额外的HTTP请求。如果有特殊需求必须用redirect=false，再用方法2手动解析JSON。

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