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

Question

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

我试过了来源="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

您可能需要使用 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));
        }

Answer 2

不熟悉 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();

})

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

Display thumbnail from Azure AD Graph API in html img

adal

azure-ad-graph-api

angular