It’s time for new CSOM stuff, if you want to show your user profile picture and First Name or lets says logged in user picture in some DIV or whatever you requirement is below is code that will help you, remember loading scripts in the order is very important.
FYI: I’ve UserName and IMG id that I used in the page, you can modify according to your requirement.
$(document).ready(function(){
var scriptbase = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/";
//Do not change the order, scripts should load by order.
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () {
$.getScript(scriptbase + "SP.UserProfiles.js", init);
});
});
});
function init(){
var clientContext = new SP.ClientContext.get_current();
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
userProfileProperties = peopleManager.getMyProperties()
clientContext.load(userProfileProperties);
clientContext.executeQueryAsync(onSuccess, onFail);
}
function onSuccess() {
var up_url = userProfileProperties.get_pictureUrl();
var DisplayName = userProfileProperties.get_displayName();
var ProfileUrl = userProfileProperties.get_userUrl();
//alert(ProfileUrl);
document.getElementById("profilelink").href = ProfileUrl;
var FirstName = DisplayName.split(',')[1];
//alert(FirstName);
document.getElementById("username").innerHTML = FirstName;
if (up_url !== null) {
$('.profile-image img').attr('src', up_url);
document.getElementById("profileimage").src = up_url;
}
}
function onFail(sender, args) {
alert("Error");
}