How To Show Current User Details With Profile Photo In Visualforce Page

Apex Controller Class

public class Result_page
{  
    public string photo{get;set;}
    public string idval{get;set;}
    public string today{get;set;}
   
    public  Result_page ()
    {
        today = DateTime.now().format('EEEEEEEEE')+' '+DateTime.now().format('MMMMMMMMM')+' '+DateTime.now().format('dd')+', '+DateTime.now().format('YYYY');
    }
   
    public void uid()
    {
        system.debug('id value'+idval);
        User u = new User();
        photo = [select SmallPhotoUrl from User where id = :idval].SmallPhotoUrl;
        system.debug('photo value'+photo);
    }  

}


Visualforce Page

<apex:page controller="Result_page" id="pg">
<!-- Define Your Jquery Script To Call Action Function-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready
    (
        function()
        {
            sendid();
         }
     );
</script>
<apex:form >
    <!-- Define Action Function To Send User Id To Controller-->
    <apex:actionFunction name="sendid" action="{!uid}" reRender="user">
        <apex:param name="idv" value="{!$User.Id}" assignTo="{!idval}"/>
    </apex:actionFunction>
    <!-- Design your Page-->
    <apex:outputPanel layout="block" styleClass="bPageTitle" id="user">
        <apex:outputPanel layout="block" style="display:inline;" styleClass="ptBody secondaryPalette">
            <apex:outputPanel layout="block">
                <apex:outputPanel layout="block" style="float:left;margin-right:10px;">
                    <a href="/_ui/core/userprofile/UserProfilePage">
                        <apex:image value="{!photo}" height="40"/>
                    </a>
                </apex:outputPanel>
            </apex:outputPanel>
            <apex:outputPanel layout="block">
                <apex:outputPanel layout="block" style="font-size:16px;color:#015ba7;">
                   <a href="/_ui/core/userprofile/UserProfilePage" style="text-decoration:none;">
                       {!$User.FirstName} {!$User.LastName}
                   </a>
                </apex:outputPanel>
                <apex:outputPanel layout="block" style="font-size:11px;color:#015ba7;margin-top:10px;">
                    {!today}
                </apex:outputPanel>
            </apex:outputPanel>
            <apex:outputPanel layout="block" style="float:right;">
                <apex:outputPanel layout="block" style="">
                    <!-- Define Your Help Links Here -->
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:outputPanel>
</apex:form >

</apex:page>

OutPut