I have written the following code to get the user profile image and display on my master page header. Everything is working fine with Chrome but in IE I get a broken image link where i should be seeing the image. I'm getting the data back in both browsers no problem just the image in IE. Is there a better way to do this or can anyone spot any potential issue with the JSOM?
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
var currentUser;
// Ensure that the SP.js is loaded
if (SP.ClientContext != null)
{
SP.SOD.executeOrDelayUntilScriptLoaded(getCurrentUser, 'SP.js');
}
else
{
SP.SOD.executeFunc('sp.js', null, getCurrentUser);
}
function getCurrentUser() {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
currentUser = web.get_currentUser();
context.load(currentUser);
context.executeQueryAsync(onSuccessMethod, onRequestFail);
}
function onSuccessMethod(sender, args) {
var account = currentUser.get_title();
var currentUserAccount = account.substring(account.indexOf("|") + 1);
var currentUserAccountUnderScore = currentUserAccount.toLowerCase().replace(/\s/g, "_");
//alert(currentUserAccount);
$("#username").text(currentUserAccount);
$("#ProfileImage").attr("src", "https://mydomain-my.sharepoint.com/User%20Photos/Profile%20Pictures/" + currentUserAccountUnderScore + "_mydomain_onmicrosoft_com_MThumb.jpg");
$("#ProfileImage").attr("alt", currentUserAccount + " User Profile Image");
$("#ProfileImage").attr("class", "ss-profile-image");
}
//This function runs if the executeQueryAsync call fails.
function onRequestFail(sender, args) {
alert('request failed' + args.get_message() + '\n' + args.get_stackTrace());
$("#ProfileImage").attr("src", "https://mydomain.sharepoint.com/SiteAssets/userImageDefault.jpg");
}
});
//]]>
</script>
Ok so I have rewritten this in REST and thought it would sort my issues but I'm still getting intermittent problems displaying the image in IE. I get the ALT tags etc no issue it's just the image...do i need to move this into a JS file?
My new REST code is as follows.
<script type="text/javascript">
$(document).ready(function () {
var userid = _spPageContextInfo.userId;
function GetCurrentUser() {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
var requestHeaders = { "accept" : "application/json;odata=verbose" };
$.ajax({
url : requestUri,
contentType : "application/json;odata=verbose",
headers : requestHeaders,
success : onSuccess,
error : onError
});
}
function onSuccess(data, request){
var loginName = data.d.LoginName.split('|')[2];
var fullName = data.d.Title;
var fullNameUnderScore = fullName.toLowerCase().replace(/\s/g, "_");
$("#username").text(fullName);
$("#ProfileImage").attr("src", "https://xxxxxx-my.sharepoint.com/User%20Photos/Profile%20Pictures/" + fullNameUnderScore + "_xxxxxx_onmicrosoft_com_MThumb.jpg");
$("#ProfileImage").attr("alt", fullName + " User Profile Image");
$("#ProfileImage").attr("class", "ss-profile-image");
//alert(loginName + userid + fullName + fullNameUnderScore);
}
function onError(error) {
// lets set the image to a default so we dont get any errors.
$("#ProfileImage").attr("src","https://mydomain.sharepoint.com/SiteAssets/userImageDefault.jpg");
//alert(error);
}
GetCurrentUser();
});
</script>