Home > Chris Stretton, Work > Adding a default image for remote served images

Adding a default image for remote served images

Quite often when working with data within a SharePoint environment, we wish to link the data to images hosted within a third party system.

This is often seen in the form of staff pictures that are hosted on a third party HR platform rather than within Active Directory, so the User Profile service images are of no use to us.

Unfortunately there is no real way of detecting if the image on the third party system actually exists, which means that rather than seeing the nice friendly missing profile image, you get a horrible missing image box.

This can be overcome with some simple JavaScript:

(function(){

    var defaultImage = "/_layouts/15/images/PersonPlaceholder.200x150x32.png";

    var profileImage = document.createElement("img");

    // Define an error handler, this will fire if there is an
    // error loading the URL for the staff image and redirect
    // it to the missing user profile image in the hive.

    profileImage.onError = function() {

        this.src = defaultImage;

    }

    // Point the image element to our staff images then attach
    // it to the DOM.

    profileImage.src = "http://hr/staffimages/" + employeeId + ".png";

    // Note that the employeeId variable referenced above is to be
    // provided externally and is beyond the scope of this post.

    var container = document.getElementById("profileImageContainer");

    if (container) {
        container.appendChild(profileImage);
    }
})();

With this code in place any missing images will automatically serve the default image instead.

This method will work anywhere you need to serve images and have no way of detecting if the image to be served exists or not.

Chris Stretton
SharePoint and Project Server Consultant

  • MCITP – SharePoint Administrator 2010
  • MCTS – Microsoft Project 2010 – Managing Projects, Project Server 2010, Configuration, SharePoint 2010, Configuration
  • Prince 2 – Practitioner

This article has been cross posted from spchris.com (original article)

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: