默认个人资料图片 - MicrosoftGraph、React

Question

我正在尝试制作一个连接到您的 MS 帐户的 React 应用程序。我遇到的问题是，当没有头像的人注册时，API 会认为是错误的。最好亲自看看。 How it looks when there is no profile picture on the MS account

如何在没有图片显示的情况下显示默认头像？

这是后端和请求发送。

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

这是图片的 React 组件：

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

Answer 1

您无法从 Graph API 中获取默认个人资料图片。

默认个人资料图片存储在 C:\ProgramData\Microsoft\User 帐户图片中。

您可以将这些图片作为资源添加到您的应用程序中，如果出现任何错误 return 默认图片。

[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");
}

Answer 2

我做了类似于@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();
               
            }
           
        }

对于前端，我实现了一个简单的 onerror

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

默认个人资料图片 - MicrosoftGraph、React

Default Profile picture - MicrosoftGraph, React

c#

image

reactjs

react-native

microsoft-graph-api