如何從 Microsoft graph API 訪問用戶的個人資料照片並顯示 React 應用程序？

Question

我正在嘗試使用Microsoft 的 Graph API訪問用戶的個人資料圖片。 以下是我獲取個人資料圖片的代碼：

export async function getprofilePhoto() {
  const accessToken = await getToken(loginRequest);
  const headers = new Headers();
  const bearer = `Bearer ${accessToken}`;
  headers.append("Authorization", bearer);

  const options = {
    method: "GET",
    headers: headers,
  };

  return fetch(graphConfig.graphMePhotoEndpoint, options)
    .then((response) => {
      if (response != null && response.ok) {response.blob().then((data) => {
          if (data !== null) {
            window.URL = window.URL || window.webkitURL;
            return window.URL.createObjectURL(data);
          }
        });
      } else {
        throw new Error("Profile image not found");
      }
    })
    .catch((error) => {
      throw new Error("Profile image not found");
    });
}

在我的反應組件中，我傳遞來自上述 function 的返回數據，但它從不渲染圖像。 我的組件的代碼如下所示：

<Avatar
 alt={name}
 src={profileImage}
 className={classes.avatarMain}
 />

profileImage 是 getprofilePhoto() 方法返回的數據。 我還可以在網絡選項卡中看到對https://graph.microsoft.com/v1.0/me/photo/$value的請求，並帶有圖像的成功響應，但它從未出現在我的組件中。

有人可以幫我弄清楚我做錯了什么嗎？

Answer 1

問題是我又發送了一個標題（鍵/值），即"Content-Type", "image/jpeg"並且代碼開始工作