How to Fix User Profile Picture Error When Retrieving From RestAPI or JSOM on SharePoint Online

Image Title

posted by Nguyen Tuan
on Jul 05, 2017

In SharePoint Online, to show user profile on a page or a content editor web part, we often use rest API or JSOM. Some of rest URLs are listed below:

  • https://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties
  • https://siteurl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor([email protected])[email protected]=’i:0%23.f|membership|[email protected]
  • https://siteurl/sites/contoso-dev/_vti_bin/ListData.svc/UserInformationList

The Problem

The problem is that the PictureURL property which we could easily find from the result of above rest APIs is useless. If we use this property as the source to display the user picture, we will see a broken image. The reason is that this PictureURL property is a URL from “my site” (ex:

https://contoso-my.sharepoint.com:443/User Photos/Profile Pictures/david_contoso_onmicrosoft_com_MThumb.jpg

) and displaying a picture from my site is a cross-origin request; you have to access “my site” before you can see the picture.

SharePoint Online

 

The Solution

There is a straightforward way to fix the problem. Simply use this URL format:

https://siteurl/_layouts/15/userphoto.aspx?size=L&accountname=<accountName>

Note that

<accountName> is the “AccountName” property that you could easily find from restAPI, just like “PictureURL” property. <accountName> must be encoded. Once that is done, the problem is solved!
SharePoint Online

 

I hope this quick tutorial helps you solve the problem that I often face. A small tweak is all you need! Let me know in the comment below if the solution works for you. If it doesn’t, feel free to write down the problems you encounter and I’ll respond to it as soon as I can.

SharePoint Webinars

Interested in learning more about SharePoint? NIFTIT hosts bi-weekly webinars for beginners to power users. Check out our upcoming webinar “SharePoint Workflow: From Basic to Advanced“. On this webinar, you will learn how to manage project tasks and collaborate on documents by implementing business processes on a SharePoint site. Make Microsoft Flow works for you – so you’ll save time and effort by bringing consistency and efficiency when performing daily tasks. Sign up for the webinar today!

SharePoint Online

 

[Read more: Creating Microsoft Office Document Templates via SharePoint] 

Want more tutorials about Sharepoint? subscribe to our newsletter