如何使用Microsoft Graph API获取用户头像？图片无法显示问题求助

阿华AIGC实验室

2026-5-28

解决Microsoft Graph用户照片无法显示的问题

我看了你的代码，问题主要出在后端传输二进制数据的方式，还有几处异步处理、模板语法的小错误，下面一步步帮你修正：

1. 修正Graph API调用的核心问题

先看graph.js，这里有两个关键错误：一是URL里的模板语法用错了，二是异步调用没加await，还有Authorization头漏了Bearer前缀（Graph API强制要求这个格式）：

// graph.js
function getUserPhoto(token, userId){
  return axios({
    method : 'get',
    // 用模板字符串替换错误的{{user_id}}模板语法
    url : `https://graph.microsoft.com/v1.0/users/${userId}/photo/$value`,
    headers: {
      // 必须加上Bearer前缀，否则Graph API会拒绝请求
      'Authorization': `Bearer ${token}`,
    },
    responseType : 'blob' // 这个配置是对的，告诉axios返回Blob对象
  })
}

async function getUserPhotoData(token,userId) {
  try{
    // 异步调用必须加await，否则拿不到真实的响应数据
    let userPhoto = await getUserPhoto(token,userId);
    return userPhoto.data; // 返回原始Blob对象
  }catch (e) {
    console.log(e);
  }
}

2. 后端直接返回二进制流，别转JSON

你的router.js里用res.json(result)把Blob转成JSON返回，这会把二进制数据转成乱码字符串，前端根本没法解析。应该直接把二进制流作为响应发送，同时设置正确的图片类型头：

// router.js
router.get('/photo/:id',function (req,res) {
  auth.getAccessToken().then(function (token){
    let userId = req.params.id;
    graph.getUserPhotoData(token, userId).then(function (result) {
      // 设置响应头，告诉前端这是JPEG图片
      res.setHeader('Content-Type', 'image/jpeg');
      // 直接把Blob的流管道到响应中（Node.js环境下）
      result.stream().pipe(res);
    }).catch(function (e) {
      console.log(e);
      res.status(500).send('获取用户照片失败');
    })
  });
});

3. 前端简化处理，直接用请求地址当图片源

既然后端已经返回正确的图片二进制流，前端不需要再做复杂的Blob处理，直接把请求地址赋值给img的src就行：

// index.js
// 最简单的方式：直接设置img的src
document.getElementById('user-img').src = `/photo/${userId}`;

// 如果需要捕获加载错误，可以用fetch处理：
fetch(`/photo/${userId}`)
  .then(response => {
    if (!response.ok) throw new Error('照片加载失败');
    return response.blob();
  })
  .then(blob => {
    const blobUrl = window.URL.createObjectURL(blob);
    document.getElementById('user-img').src = blobUrl;
  })
  .catch(err => console.log(err));