基于.NET Core+Angular：从SharePoint外部访问用户头像与列表图片

1. 展示SharePoint Online用户头像 #

后端（.NET Core）获取头像URL #

通过SharePoint CSOM接口，基于用户邮箱转换的登录名获取用户配置文件中的头像地址：

• 先将用户邮箱转换为SharePoint标准登录名格式：i:0#.f|membership|user@yourdomain.com
• CSOM代码示例：

using Microsoft.SharePoint.Client;
using System.Security;

var siteUrl = "https://yourtenant.sharepoint.com/sites/yoursite";
var username = "admin@yourdomain.com";
var password = "yourpassword";

var securePassword = new SecureString();
foreach (char c in password) securePassword.AppendChar(c);

using (var ctx = new ClientContext(siteUrl))
{
    ctx.Credentials = new SharePointOnlineCredentials(username, securePassword);
    var peopleManager = new PeopleManager(ctx);
    // 替换为目标用户的登录名（从邮箱转换而来）
    var userProfileProps = peopleManager.GetPropertiesFor("i:0#.f|membership|user@yourdomain.com");
    ctx.Load(userProfileProps);
    ctx.ExecuteQuery();
    
    // 提取头像URL
    string avatarUrl = userProfileProps.UserProfileProperties["PictureUrl"];
    // 将URL返回给Angular前端
}

前端（Angular）展示头像 #

将后端返回的avatarUrl直接绑定到<img>标签：

<!-- 若返回的是相对URL，需拼接SharePoint站点根地址 -->
<img [src]="avatarUrl" alt="用户头像" class="avatar">

注意：如果公共站点是匿名访问模式，需确认用户头像URL无需身份验证即可访问（默认SharePoint系统头像支持匿名访问，自定义头像需检查存储库的权限设置）。

2. 检索SharePoint Online列表/库中的图片 #

场景1：从图片库（文档库）检索图片 #

后端（.NET Core）获取图片地址

通过CSOM查询图片库，筛选出指定格式的图片文件：

using Microsoft.SharePoint.Client;
using System.Security;

var siteUrl = "https://yourtenant.sharepoint.com/sites/yoursite";
var username = "admin@yourdomain.com";
var password = "yourpassword";

var securePassword = new SecureString();
foreach (char c in password) securePassword.AppendChar(c);

using (var ctx = new ClientContext(siteUrl))
{
    ctx.Credentials = new SharePointOnlineCredentials(username, securePassword);
    // 获取目标图片库
    var pictureLibrary = ctx.Web.Lists.GetByTitle("图片库");
    
    // 构建CAML查询，筛选图片格式文件
    var camlQuery = new CamlQuery();
    camlQuery.ViewXml = @"<View>
                            <Query>
                                <Where>
                                    <In>
                                        <FieldRef Name='FileLeafRef' />
                                        <Values>
                                            <Value Type='Text'>.jpg</Value>
                                            <Value Type='Text'>.png</Value>
                                            <Value Type='Text'>.jpeg</Value>
                                        </Values>
                                    </In>
                                </Where>
                            </Query>
                          </View>";
    
    var imageItems = pictureLibrary.GetItems(camlQuery);
    ctx.Load(imageItems, items => items.Include(
        item => item["FileRef"],  // 文件服务器相对路径
        item => item["FileLeafRef"]  // 文件名
    ));
    ctx.ExecuteQuery();
    
    // 整理图片完整URL
    var imageUrls = imageItems.Select(item => 
        $"{siteUrl}{item["FileRef"]}"
    ).ToList();
    // 将URL列表返回给Angular前端
}

场景2：从列表的图片字段/附件检索图片 #

列表图片字段（如发布图片类型）

若列表包含自定义图片字段（例如字段名为CoverImage），直接从列表项中提取URL：

// 加载列表项时包含目标图片字段
ctx.Load(listItems, items => items.Include(
    item => item["CoverImage"]
));
ctx.ExecuteQuery();

foreach (var item in listItems)
{
    // 图片字段为FieldUrlValue类型
    var imageField = item["CoverImage"] as FieldUrlValue;
    if (imageField != null)
    {
        string imageUrl = imageField.Url;
        // 处理URL并返回
    }
}

列表项附件图片

若图片是列表项的附件，需加载附件集合提取URL：

// 加载目标列表项及其附件
ctx.Load(listItem, item => item.AttachmentFiles);
ctx.ExecuteQuery();

var attachmentUrls = listItem.AttachmentFiles.Select(file => 
    $"{siteUrl}{file.ServerRelativeUrl}"
).ToList();

前端（Angular）展示图片 #

将后端返回的图片URL数组遍历渲染：

<div *ngFor="let imgUrl of imageUrls">
    <img [src]="imgUrl" alt="展示图片" class="gallery-img">
</div>

注意：公共站点需确保目标库/列表已开启匿名访问权限，否则前端访问图片会返回401未授权错误。

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