我来帮你搞定这个头像加载的问题！结合你描述的场景，Facebook头像无法显示大概率是浏览器安全策略限制或者URL格式不对导致的，下面是具体的解决步骤：

1. 修复HTTP/HTTPS混合内容拦截问题 #

现在主流浏览器都会阻止HTTPS页面加载HTTP资源（也就是「混合内容」），你存储的Facebook头像URL是http://graph.facebook.com/...这类HTTP协议的链接，直接用会被浏览器拦截。

你可以在模板里直接替换协议为HTTPS，同时改用Angular推荐的属性绑定[src]代替插值表达式（更安全也更符合最佳实践）：

<tr *ngFor="let user of users | async">
  <td>
    <div class="avatar">
      <img [src]="user.photoUrl.replace('http://', 'https://')" style="width:100%; height:100%" alt="用户头像">
    </div>
  </td>
</tr>

2. 补全Facebook Graph API的图片端点参数 #

有时候即使换成HTTPS，直接访问graph.facebook.com/用户ID返回的不是图片资源，而是重定向或者JSON数据。这时候需要在URL末尾加上/picture后缀和尺寸参数，确保返回的是直接可显示的图片：

比如完整的正确URL应该是：https://graph.facebook.com/IcjfUJmPBgMbuZc5/picture?type=large

你可以在模板里做个判断，只给Facebook的URL补全参数：

<tr *ngFor="let user of users | async">
  <td>
    <div class="avatar">
      <img 
        [src]="user.photoUrl.includes('graph.facebook.com') 
          ? user.photoUrl.replace('http://', 'https://') + '/picture?type=medium' 
          : user.photoUrl.replace('http://', 'https://')" 
        style="width:100%; height:100%"
        alt="用户头像">
    </div>
  </td>
</tr>

这里的type=medium可以换成small/large，或者用width=200&height=200自定义尺寸。

3. 检查Firestore中存储的URL完整性 #

确认一下你存在Firestore里的Facebook URL是不是完整的——如果只存了http://graph.facebook.com/IcjfUJmPBgMbuZc5，那确实无法直接显示图片，必须加上/picture后缀才行。如果可以的话，建议在后端存储用户数据时就处理成完整的HTTPS图片链接，这样前端就不用额外处理了。

内容的提问来源于stack exchange，提问作者fahad navaid khan