7

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>
1
  • I want to use Newsfeed's Change your Photo functionality in a particular page so, user can upload his own image. How it is possible? Nov 8, 2013 at 6:16

5 Answers 5

17

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

3
  • 1
    Thank you for this, pictures being in different domain have been huge issue, and this solves it!
    – Jussi Palo
    Oct 28, 2013 at 12:40
  • Thank you man!, this works as a treat, just out of curiosity, where did you find this documentation!? May 2, 2014 at 0:17
  • But what if the user's has set profile picture in Azure Active Directory? In that case the picture is synchronized but it does not give profile image? May 23, 2017 at 4:14
4

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
4

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

6
  • 1
    While you have every right to mark an answer to your question as the accepted answer, the approach you are using is not the best solution to the problem. What if Microsoft decides to change the URL path to profile images? Your code will break while the code suggested in the other three answers will continue to work. Microsoft provides an API specifically designed to access user profile information and that's really what you should be using in this case. Jul 29, 2013 at 14:33
  • 1
    Yes I agree with what you are saying but problem is happening using whatever methodology (JSOM, REST or API etc) you're still going to have an issue with IE and displaying the image. I am using the REST API. The problem is not the code/method is the permission on the images folder as far as I can see...
    – Stephen
    Jul 30, 2013 at 14:11
  • Man you rock!! Thank you, I had the same issue that you but with all the browsers, I was trying with Iframe and was returning the same origin policy error, with the image works as a treat, thank you again! May 2, 2014 at 0:10
  • Hello, I am also facing the same issue. But I am bit confused where to put this img tag in the page? it should be in page layout or it should be master page?
    – Mihir
    Jun 13, 2014 at 10:40
  • 1
    Stephen can you elaborate more how you used the hidden image.And where it was used.Please be more clear.Thnaks
    – naijacoder
    Oct 9, 2014 at 23:16
3

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)

3

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

1
  • thanks for the feedback, ended up rewriting it in REST which seems to be a little more stable.
    – Stephen
    Jul 15, 2013 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.