在HTML img中显示来自Azure AD Graph API的缩略图 [英] Display thumbnail from Azure AD Graph API in html img
问题描述
我可以成功获取看似用户图像的png数据，但无法使其显示在img元素中.(我通过调用- https://graph.windows.net/ {我的租户}/用户/{我的用户}/thumbnailPhoto?api-version=1.6)
I can successfully get what appears to be the png data of a user image but am unable to get it to display in an img element. (Im getting the data by calling - 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)
I have tried src="data:image/png;base64,{THE_DATA_HERE}" but that doesn't seem to work. (Pasting the data here - http://codebeautify.org/base64-to-image-converter didnt work either so apparently its not base64)
关于如何获得此结果以显示在img中的任何想法?(这是在JavaScript中完成的-客户端)
Any ideas on how to get this result to appear in an img? (This is being done in JavaScript - client side)
我正在使用Angular 2，并且必须将结果通过DOM Sanitizer.bypassSecurityTrustUrl传递，然后才能将其应用于src，因此也许我的代码还不太正确.有人在任何基于浏览器的客户端中都可以使用此功能吗?
I'm using Angular 2 and have to pass the result through the DOM Sanitizer.bypassSecurityTrustUrl before it will apply it to the src so perhaps my code isn't quite right yet. Anybody have this working in any browser based client?
推荐答案
不熟悉Angular2，但是很容易使用JavaScript来显示基于Azure AD Graph REST的缩略图，如下所示:
Not familiar with Angular2, however it is easy to use the JavaScript to show the thumbnail based on the Azure AD Graph REST like below:
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的缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
