如何在前端展示通过Google认证获取的用户头像？

一、直接展示Google头像的方法 #

你已经通过$googleUser->getAvatar()拿到了可直接访问的完整头像URL，完全不需要额外处理，直接把这个URL传给前端的userImage变量即可：

Vue示例（适配你提供的代码） #

<img class="rounded-full" width="95" :src="userImage">

只要确保userImage的值是Socialite返回的头像URL（比如你给出的https://lh3.googleusercontent.com/a/ACg8ocLnBsb67U_duAICud3t95-OL5c4ujmno8osiI1KLh1lTy7p9k0=s96-c），就能正常加载显示头像。

普通HTML示例 #

如果是非Vue环境，直接把URL写在src属性里：

<img class="rounded-full" width="95" src="https://lh3.googleusercontent.com/a/ACg8ocLnBsb67U_duAICud3t95-OL5c4ujmno8osiI1KLh1lTy7p9k0=s96-c">

二、不需要调用GET https://people.googleapis.com/v1/people/me接口 #

Laravel Socialite在Google授权流程中，已经帮你获取了包括头像在内的基础用户信息，getAvatar()返回的URL是Google提供的公开可访问地址，直接用就行。只有当你需要获取更详细的用户资料（比如联系人、个人档案详情等）时，才需要调用People API，单纯展示头像完全没必要多此一举。

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