Show user profile pictures in SharePoint Hosted Apps

This is the issue which killed more than a week of my time. Many users are facing it too and I see the same question in almost all the forums. Proud to tell that the solution which I have found is the most usable one for SharePoint Hosted App world.

In SharePoint Hosted Apps the cross-domain calls are limited. The issue I am facing in SharePoint Online Hosted Apps was:

I have created a SharePoint hosted app which has the code to show the user profile picture. I have tried below options for it:

1. Queried the REST API user profile and then 
1. used the "PictureUrl" from user profile metadata. But, no luck with this. Then,
2. used the "UserProfileProperties -> PictureURL attribute in the results. Still, there is no luck. 
2. Used the Outlook Office 365 profile picture link: https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=useremail&UA=0&size=HR64x64. 
1. But, the url is an external site link the picture failed to load.
3.  Used the UserPhoto.aspx page in the _layouts folder: /_layouts/15/userphoto.aspx?size=L&accountname=encodeduseraccountname.
1. I have tried with both hosted web url and app web url. But, no luck. 
2. But, if I create a App Part and in the app part the same image path shows perfectly. So, the issue is only in the App landing page. 

Published the issue in all social networking sites, forums for help, but no luck. Many people come up with different ideas, but nothing worked. 

Solution:

After spending the good amount of time in analyzing the UserPhoto.aspx, and how it works, I was able to find a way to download the image. 

UserPhoto.aspx accepts many parameters. We always use the AccountName querystring to download the image of the user. But, it also accepts other paramters like "url". 

So, the solution I used here is: 

{appweburl}/_layouts/15/userphoto.aspx?size=L&url={encodeduserprofilepictureurl}

Note: You must query the User profile REST API for the user to get the user profile picture url and then encode that picture url and then replace the string {encodeduserprofilepictureurl} with that.

This one given me the output I wanted. Now, the pictures are showing everywhere, inside the app and also in app part...