有没有一种简单的方法可以在 React 应用程序中显示来自图形 api 的个人资料图像

Question

我正在寻找一种简单的方法来将图形 api 的图像响应显示到反应应用程序中。像这样的https://blogs.aaddevsup.xyz/2020/05/how-to-get-and-display-the-user-photo-with-graph-sdk-for-net-in-a-wpf-application /

当我尝试从 api 获取此信息时，不确定响应的格式以及如何将其转换并显示为图像？

Answer 1

MS Graph Docs - 使用请求照片的二进制数据有一些有用的注释。

这是从文档中提取的示例组件。请注意，我使用 Axios 使用 responseType: 'blob' 配置来获取照片，并在获得照片时进行渲染。

如果没有该配置，我无法让它工作。

import { useEffect, useState } from 'react';
import Axios from 'axios'

function App() {
  const [imageUrl, setImageUrl] = useState(null)
  useEffect(() => {
    Axios.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
      headers: { 'Authorization': 'Bearer eyJ...' },
      responseType: 'blob'
    }).then(o => {
      const url = window.URL || window.webkitURL;
      const blobUrl = url.createObjectURL(o.data);
      setImageUrl(blobUrl)
    })
  }, [])
  return (
    <div className="App">
      {imageUrl && <img alt='my-user-avatar' src={imageUrl} />}
    </div>
  );
}

export default App;

仅供参考，您可能还有兴趣使用MS Graph UI Toolkit for Reactjs，因为您似乎正在渲染用户个人资料卡。