React对接Microsoft Graph无用户头像时显示默认头像问题咨询

方案1：前端快速适配（优先实现） #

img标签原生支持onError事件，当图片资源加载失败（包括接口返回错误、资源不存在等情况）时会触发该事件，我们可以利用这个特性自动切换到默认头像。
修改后的React组件代码如下：

import React, { useState } from "react";
// 这里替换为你自己项目里的默认头像路径
const DEFAULT_AVATAR = "/static/default-avatar.png";

export default function Photo({ email }) {
  const [avatarSrc, setAvatarSrc] = useState(`api/microsoftgraph/photo/${email}`);

  const handleLoadError = () => {
    setAvatarSrc(DEFAULT_AVATAR);
  };

  return (
    <img
      className="profilePicture"
      src={avatarSrc}
      alt="头像"
      onError={handleLoadError}
    />
  );
}

这个方案改造成本极低，不需要改动后端逻辑，即使后续其他场景下图片加载失败也能正常兜底。

方案2：后端接口兜底（推荐补充实现） #

你当前的后端接口没有对Graph API调用失败的情况做异常捕获，当用户无对应尺寸头像时，接口会直接返回500错误，我们可以在后端增加异常处理逻辑，调用失败时直接返回默认头像的资源，这样即使前端没有做兼容也不会出现图片加载失败的碎图图标。
修改后的后端代码如下：

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

namespace BursaLicentelor.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class MicrosoftGraphController : ControllerBase
    {
        private readonly GraphServiceClient _graphClient;
        // 默认头像的本地存储路径，自行调整
        private const string DefaultAvatarPath = "wwwroot/static/default-avatar.png";

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

        [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)
            {
                // 调用Graph接口失败时，返回默认头像
                var defaultAvatarBytes = await System.IO.File.ReadAllBytesAsync(DefaultAvatarPath);
                return File(defaultAvatarBytes, "image/png");
            }
        }
    }
}

建议两个方案同时实现，双重兜底，避免极端情况下出现异常展示。

内容的提问来源于stack exchange，提问作者bSwizzle