Default Profile picture - MicrosoftGraph, React-CodePudding

I'm trying to make a React app that connects to your MS account. The problem I've encountered is that when someone with no profile picture registers, the API will take it as an error. It's best to see for yourself. How it looks when there is no profile picture on the MS account

How do I make it to display a default profile picture when there is no picture to display?

This is the back-end and the request send.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Graph;

namespace BursaLicentelor.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class MicrosoftGraphController : ControllerBase
    {
        private readonly GraphServiceClient _graphClient;

        public MicrosoftGraphController(GraphServiceClient graphClient)
        {
            _graphClient = graphClient;
        }

        [HttpGet("photo/{userPrincipalName}")]
        public async Task<IActionResult> GetProfilePhoto([Required] string userPrincipalName)
        {
            
            var photo = await _graphClient.Users[userPrincipalName]
                .Photos["240x240"]
                .Content
                .Request()
                .GetAsync();
            return File(photo, "image/png");
        }
    }
}

And this is the React component for the picture:

// This is the front-end React component
import React from "react";

export default function Photo({ email }) {
  return (
    <img
      className="profilePicture"
      src={`api/microsoftgraph/photo/${email}`}
      alt="avatar"
    />
  );
}

CodePudding user response：

You cannot get default profile picture from Graph API.

The default profile pictures are stored in C:\ProgramData\Microsoft\User Account Pictures.

You can add those pictures as resources to your app and in case of any error return the default picture.

[HttpGet("photo/{userPrincipalName}")]
public async Task<IActionResult> GetProfilePhoto([Required] string userPrincipalName)
{
    Stream photo;
    try
    {
        photo = await _graphClient.Users[userPrincipalName]
                .Photos["240x240"]
                .Content
                .Request()
                .GetAsync();
    }
    catch(Exception ex)
    {
        photo = await LoadDefaultProfilePictureFromResources("240x240");
    }
    return File(photo, "image/png");
}

CodePudding user response：

I've done something similar to what @user2250152 sugeted.

 [HttpGet("photo/{userPrincipalName}")]
        public async Task<IActionResult> GetProfilePhoto([Required] string userPrincipalName)
        {
            
        
            try
            {
                var photo = await _graphClient.Users[userPrincipalName]
                    .Photos["240x240"]
                    .Content
                    .Request()
                    .GetAsync();
                    return File(photo, "image/png");
                }
            catch(ServiceException ex)
            {
                return NotFound();
               
            }
           
        }

And for the frontend I implemented a simple one rror

 <img
      className="profilePicture"
      src={`api/microsoftgraph/photo/${email}`}
      one rror={(e) => {
        e.target.onerror = null;
        e.target.src = "/default.png";
        e.target.alt = "mno";
      }}
    />