sharepoint profile image not displayed

Hi Guys i'm new in ionic with sharepoint

I have developed a Mobile app using ionic3 with sharepoint.

Now i have to get user profile picture in my app.

I have tried these are the way can't achieve here is my tried code.

First way tried like this

abc.sharepoint.com/sites/qa/_layouts/15/userphoto.aspx?size="s"&accountname="[email protected]"

Second way tried like this

These url iam geting using people picker result. PictureURL property

https://abc.sharepoint.com/User Photos/ProfilePictures/abc_onmicrosoft_com_MThumb.jpg", "Muthu.jpeg"

These Second method always return

401 UNAUTHORIZED

Above url using to call this method.

public downloadFile(url: string, fileName: string) {
let options = this._apiHeaderForImageURL();
this._http.get(url, options)
.subscribe((data) => {
//here converting a blob to base 64 For internal view purpose in image src
var reader = new FileReader();
reader.readAsDataURL(data.blob());
reader.onloadend = function () {
console.log("Base64", reader.result);
}
//Here Writing a blob file to storage
this.file.writeFile(this.file.externalRootDirectory, fileName, data.blob(), { replace: true })
.then((success) => {
console.log("File Writed Successfully", success);
}).catch((err) => {
console.log("Error While Wrinting File", err);
});
});
}
public _apiHeaderForImageURL() {
let headers = new Headers({ 'Content-Type': 'image/jpeg' });
headers.append('Authorization', 'Bearer ' + localStorage.getItem("token"));
let options = new RequestOptions({ headers: headers, responseType: 3 });
return options;
}

The first api call worked fine result also sucess but image not displayed properly. Thats the problem i'm facing.

The result comes an default image like this only.

pls help me to achieve this. Any help warmly accepted.

Iam doing long time stuff to achieve this still i cant achieve pls give some idea.

Is any other way is available to get user picture in ionic 3 using spfx?

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Arutselvan Muthukannu8y ago
Accepted answer
Hari,

Since you are using Ionic framework to create mobile app, you're not using SPFx I think. You should have created Azure AD app to work with this one. You can use graph API to retrieve the profile picture. Use the below endpoint to retrieve the profile picture.

https://graph.microsoft.com/v1.0/me/photo/$value

Make sure that you are getting the Access token for graph endpoint using OAuth.
+5
Hari Murugesan8y ago
Arutselvan,

you said correct . I got a solution using graph api . thank you so much.
+1
Nanddeep Nachan8y ago
I have raised it with PnP about the url. Even it is not working for me.
0
Nanddeep Nachan8y ago
Have a look at the PnP implementation here
https://dev.office.com/blogs/consuming-user-profile-service-with-sharepoint-framework-solution
0
Hari Murugesan8y ago
Hi Nanddeep Nachan,

I've already try this one. the url is not working
+2
Nanddeep Nachan8y ago
Please try using the REST API - GetPropertiesFor

https://SiteUrl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='DOMAIN\UserName'&$select=PictureUrl
0