.NET 6 + Angular 14 好友列表图片无法显示问题求助

核心问题分析 #

结合你的代码，图片无法显示主要有以下几个关键原因：

1. 属性名大小写不匹配 #

后端Friend实体的导航属性是小写的photo，但前端HTML中使用了大写的Photo：

// 后端Friend类
public Photo photo { get; set; }

<!-- 前端HTML（错误写法） -->
<img [src]="getPhotoSrc(friend.Photo)" ... />

.NET默认JSON序列化会将属性转为驼峰式（photo），前端无法获取到friend.Photo，导致getPhotoSrc接收的参数为undefined。

2. 重复Base64编码 #

.NET 6默认会将byte[]类型序列化为Base64字符串，但你的前端代码再次使用btoa编码，导致双重编码，图片数据损坏。

3. 大数组编码限制（可选） #

如果后端返回的是原始字节数组（非Base64），使用String.fromCharCode.apply(null, photo.data)处理大数组时，会超出JavaScript的参数长度限制，导致编码失败。

分步修复 #

修复1：修正属性名大小写 #

将HTML中的friend.Photo改为friend.photo：

<tr *ngFor="let friend of friends">
  <td>{{ friend.id }}</td>
  <td>{{ friend.firstName }}</td>
  <td>{{ friend.lastName }}</td>
  <td>
    <img [src]="getPhotoSrc(friend.photo)" alt="Photo" width="200" height="220" />
  </td>
</tr>

修复2：移除重复Base64编码 #

直接使用后端返回的Base64字符串生成图片URL：

getPhotoSrc(photo: any): string {
  if (photo && photo.data) {
    // 注意：根据实际图片格式修改mime类型，比如png改为image/png
    return `data:image/jpeg;base64,${photo.data}`;
  }
  return '';
}

修复3：处理大字节数组（如果后端返回原始字节数组） #

如果后端未将byte[]序列化为Base64（比如修改了JsonOptions），需要分段处理字节数组避免参数溢出：

getPhotoSrc(photo: any): string {
  if (!photo || !photo.data || photo.data.length === 0) return '';
  
  const byteArray = new Uint8Array(photo.data);
  const chunkSize = 1024;
  const chunks: string[] = [];
  
  for (let i = 0; i < byteArray.length; i += chunkSize) {
    chunks.push(String.fromCharCode(...byteArray.slice(i, i + chunkSize)));
  }
  
  const base64 = btoa(chunks.join(''));
  return `data:image/jpeg;base64,${base64}`;
}

修复4：动态匹配图片MIME类型（可选） #

结合FileName的后缀动态设置图片类型，避免格式不匹配：

getPhotoSrc(photo: any): string {
  if (!photo || !photo.data) return '';
  
  let mimeType = 'image/jpeg';
  if (photo.fileName) {
    const ext = photo.fileName.split('.').pop()?.toLowerCase();
    switch(ext) {
      case 'png': mimeType = 'image/png'; break;
      case 'gif': mimeType = 'image/gif'; break;
      case 'webp': mimeType = 'image/webp'; break;
    }
  }
  
  return `data:${mimeType};base64,${photo.data}`;
}

验证步骤 #

1. 打开浏览器开发者工具（F12），切换到Network标签，查看returnAllFriends接口的返回数据，确认friend.photo.data存在且格式正确。
2. 切换到Console标签，检查是否有属性未定义、编码错误等提示。
3. 修复后刷新页面，查看图片是否正常显示。

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