在 html img 中显示来自 Azure AD Graph API 的缩略图

Question

我可以成功获取用户图像的 png 数据，但无法将其显示在 img 元素中。 （我通过调用来获取数据 - https://graph.windows.net/{my tenant}/users/{my user}/thumbnailPhoto?api-version=1.6）

我试过了 src="data:image/png;base64,{THE_DATA_HERE}" 但这似乎不起作用。 （在此处粘贴数据 - http://codebeautify.org/base64-to-image-converter 也不起作用，因此显然它不是 base64）

关于如何让这个结果出现在 img 中的任何想法？ （这是在 JavaScript 中完成的 - 客户端）

我正在使用 Angular 2，并且必须通过 DOM Sanitizer.bypassSecurityTrustUrl 传递结果，然后才能将其应用于 src，所以我的代码可能还不太正确。任何人都可以在任何基于浏览器的客户端中使用此功能？

Answer 1

不熟悉 Angular2，但是很容易使用 JavaScript 显示基于 Azure AD Graph REST 的缩略图，如下所示：

var oReq = new XMLHttpRequest();
oReq.open("GET", "https://graph.windows.net/{teantId}/users/user1@xxx.onmicrosoft.com/thumbnailPhoto?api-version=1.6", true);
oReq.setRequestHeader("authorization","bearer {access_token}")
oReq.responseType = "blob";

oReq.onload = function(oEvent) {

var imageUrl = window.URL.createObjectURL(oReq.response);
var img = document.createElement('img');
img.src = imageUrl ;
document.body.appendChild(img);  

};

oReq.send();

})

Answer 2

您可能需要使用IStreamFetcher 来请求图像。有一个示例here 可以做到这一点。

        IUser sUser = (IUser) signedInUser;
        IStreamFetcher photo = (IStreamFetcher) sUser.ThumbnailPhoto;
        try
        {
            DataServiceStreamResponse response =
                await photo.DownloadAsync();
            Console.WriteLine("\nUser {0} GOT thumbnailphoto", signedInUser.DisplayName);
        }
        catch (Exception e)
        {
            Program.WriteError("\nError getting the user's photo - may not exist {0}",
                Program.ExtractErrorMessage(e));
        }