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

【问题标题】：Default Profile picture - MicrosoftGraph, React默认个人资料图片 - MicrosoftGraph、React
【发布时间】：2021-09-25 07:06:59
【问题描述】：

我正在尝试制作一个连接到您的 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"
    />
  );
}

【问题讨论】：

标签： c# reactjs image react-native microsoft-graph-api

【解决方案1】：

您无法从 Graph API 获取默认头像。

默认的个人资料图片存储在 C:\ProgramData\Microsoft\User Account Pictures 中。

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

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

【讨论】：

这似乎符合我的预期，但我不断收到错误找不到类型或命名空间名称“Stream”（您是否缺少 using 指令或程序集引用？）“。我'我尝试使用 System.IO，但没有用，并且在我尝试在 try catch 语句中初始化照片之后（如问题中所述）。也没有工作。我是新手，所以如果您可以对此进行扩展。

【解决方案2】：

我已经做了类似于@user2250152 的建议。

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

【讨论】：