Displaying user profile image using JSOM - broken image link in IE

Question

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>

Answer 1

I was having the same issue and solution to the problem we got is to use following link to get the user profile photo instead of directly accessing picture url coming from sear result or accessing direct url to the image..

[https:///_layouts/15/userphoto.aspx?size=&accountname=&url=]

size=S/M/L accountname=user's email url=url of image - optional - you can get url in pictureURL property of rest call

Answer 2

You might find my blogpost regarding the same topic useful:

http://vrdmn.blogspot.in/2013/02/sharepoint-2013-working-with-user.html

It shows how to specifically fetch the PictureUrl of the current user:

http://sitename/_api/SP.UserProfiles.PeopleManager/GetMyProperties/PictureUrl

Answer 3

Ok I have the solution to this...nothing to do with either set of code. The reason its happening is that the SP domain i'm on (https://domain.sharepoint.com/) is trying to access the "-my" version on the domain (https://domain-my.sharepoint.com/) which is where the profile images are stored. Before any code us run you should access this -my domain to which ensures the authentication redirect runs BEFORE your code runs.

I used a hidden image to do this which used the URL of the profile pictures.

<img src="https://domain-my.sharepoint.com/User%20Photos/Profile%20Pictures/" style="width:0px;height:0px;"/>

Once i had this in place my code ran perfectly.

Hope this helps someone.

S

Answer 4

If you using SharePoint 2013 you can get user profile information more easily using the PeopleManager. This blog post contains an example: Real-world Apps for SharePoint 2013 - Kudos (Part 1)

Answer 5

Use REST: http://site/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='PictureURL')?@v='domain\user'