响应为 Content-Type: image/jpeg 时如何显示答案

【问题标题】：How to display when response is Content-Type: image/jpeg响应为 Content-Type: image/jpeg 时如何显示
【发布时间】：2022-06-30 19:55:32
【问题描述】：

我正在使用以下图形 api 来获取用户个人资料图像。它在网络的响应选项卡中成功返回图像

https://graph.microsoft.com/v1.0/users/{UPN}/photo/$value

响应标头 - 内容类型：image/jpeg

但我无法在我的 html 页面中显示此响应的内容。我尝试将此图像传递给<img/> 标签

src="响应"
src="data:image/jpeg;base64,RESPONSE"

【问题讨论】：

标签： html reactjs microsoft-graph-api

【解决方案1】：

首先，请在graph explorer 中尝试此操作并检查它是否包含有效的图像，如果您在图形资源管理器中获得图像，请与我们分享代码，可能是代码中没有 API 中的问题。

【讨论】：

【解决方案2】：

Call Api: - 

    Axios.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
                  headers: { 'Authorization': 'Bearer '+AccessToken },
                  responseType: 'blob'
                }).then(o => {
                  const url = window.URL || window.webkitURL;
                  const blobUrl = url.createObjectURL(o.data);
                  
                    self.setState({ imageUrl: blobUrl });
                })

JSX: -
 <img alt="image" src={this.state.imageUrl} />

【讨论】：