Display logged in user's name and profile picture using rest api jQuery

How to display logged in user's name and profile picture using rest api jQuery

Code:-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){ 
getDetails();
});

function getDetails(){
var userDisplayName = "";
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    },
    success: MyPictureSucceeded,
    error: MyPictureFailed
});
}
function MyPictureSucceeded(data) {
userDisplayName = data.d.DisplayName;
$('#userDisplayName').text(userDisplayName);
    if(data.d.PictureUrl != null) {
        $('#escMyPic').attr('src', data.d.PictureUrl);
    }
}
function MyPictureFailed() {
        alert('Error: Unexpected error loading profile picture.');
}
</script>
User Name :-<strong><span id="userDisplayName"></span></strong><br/>
<img id="escMyPic" src="" alt="" />