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](https://i.stack.imgur.com/zZuxP.png)

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:

```js
// 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"
    />
  );
}

```