使用Auth0登录API无法加载Facebook返回的用户头像

嘿，我来帮你捋清楚这个头像加载失败的事儿！

你遇到的问题其实很常见：Auth0返回的Facebook头像链接里，所有的&都被转成了HTML实体&，但<img>标签的src属性需要的是原始的URL参数分隔符&。浏览器会把&当作URL的一部分去请求，自然就找不到正确的图片资源了。

快速解决方法 #

把链接里所有的&替换成&就行，修正后的<img>标签应该是这样的：

<img src="https://lookaside.facebook.com/platform/profilepic/?asid=1324218274262199&height=50&width=50&ext=1525319136&hash=AeSrHdLSZSZhBkyQ" alt="用户头像">

代码层面的自动处理（如果需要） #

要是你是在代码里处理这个链接（不管是前端JS还是后端逻辑），可以用字符串替换来自动处理转义字符。举个JavaScript的例子：

// 从Auth0拿到的转义后的链接
const escapedAvatarUrl = "https://lookaside.facebook.com/platform/profilepic/?asid=1324218274262199&height=50&width=50&ext=1525319136&hash=AeSrHdLSZSZhBkyQ";
// 替换所有&为&
const correctAvatarUrl = escapedAvatarUrl.replace(/&/g, "&");
// 然后把correctAvatarUrl赋值给img的src
document.querySelector('#user-avatar').src = correctAvatarUrl;

这样修改后，浏览器就能正确解析URL，顺利加载头像啦！

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