Office 365 and Profile Pictures not showing

Office 365 and Profile Pictures not showing

When you are using a user field or some custom code to display user information with in Office 365 you might have encountered some problems with the user profile pictures. Whether you run your app in an on premises setup or in Office 365 you will find out that images of the user will most likely run on another domain. As Wictor Willen pointed out you can enable Cross Domain profile pictures however there is no way to turn that on for Office 365. So within most apps on Office 365 you will end up with something like the following:

Profile pictures missing in apps

This will not only be the case in apps but as it turns out in default content fields on page layouts as well. If you are in the context of an app page this you can use the following snippet, though it requires some SharePoint scripts to be loaded. 

_spPageContextInfo.crossDomainPhotosEnabled = true;

If you are in the context of an App Part you might not always have the option to turn that on (depending on  how much of the SharePoint scripts you are loading). So it might be hard to show the picture that you need. However luckily enabling the feature on premises allow you to analyze the workings of that flag. As it turns out it uses the userpohoto.aspx page that allows you to pass an Image Source URL and a size. So in order to get the page working all you need to do is pass the correct image URL. So for app parts all you have to do is replace the URL you retrieve from a profile with the App Web URL and a reference to the user photo page. 

imgUrl = appWebUrl + "/_layouts/15/userphoto.aspx?size=M&url="
renderPictureUrl = imgUrl + profilePictureUrlFromUserProfile;

Depending on the image you can of course choose between sizes (S, M, L). Another scenario is that on default contact fields on a page layout (or the contact details web part) the image will not render images as well. There might be coming an update for that but in the mean time you are stuck with a scripted solution there. To update all image fields on a page you can use the following snippet. It will register and run after the SP.Core script to prevent timing issues, and then will loop through all image tags that have a –my.sharepoint.com source. Obviously you could teak it to make sure it would only target profile pictures rather then all images that have a –my.sharepoint.com source. If images are found with that specific URL it will process them all and make sure they will be replaced with an URL that contains the user photo page, making sure the images are shown.

ExecuteOrDelayUntilScriptLoaded(runafterSPCore, "sp.core.js"); 

function runafterSPCore()
{
    jQuery(window).load(function() {                                                                           
        replaceImages();
    });
}

function replaceImages()
{                                              
var imageHolder = jQuery("img[src*='-my.sharepoint.com']");
                
imageHolder.each(function () {
    var currentItem = jQuery(this), 
    imgSrc = currentItem.attr("src"), 
    imgSrcold = imgSrc;
    
    imgSrc = imgSrc.replace("-my","");
    imgSrc = imgSrc.substring(0,imgSrc.indexOf("User%20Photos/Profile%20Pictures"));
    imgSrc = imgSrc+"_layouts/15/userphoto.aspx?size=M&url="+imgSrcold;
    
    currentItem.attr("src",imgSrc);
});
}
There are 2 comments for this article
    • Albert-Jan Schot at 12:39

      Great article! In the Mavention Birthdays and Mavention Anniversaries we just implemented the HTML into a template, so we didn’t use the RenderUserFieldWorker, but it’s a great addition!

Leave a Reply