Angular无法加载数据库中存储为字节数组的图片

核心问题分析 #

1. 格式不匹配：后端将JPG图片转存为PBM格式字节流，但前端按JPEG格式解析，导致图片无法识别。
2. 字节数组转Base64错误：前端直接将Uint8Array拼接进Data URL，未完成正确的Base64编码转换。

解决方案 #

1. 后端修复：保存正确的JPEG格式字节流 #

你的后端代码用SaveAsPbm()把图片转成了PBM格式字节数组，和前端期望的JPEG格式不兼容。修改转换方法，改为保存JPEG格式：

byte[] ImageToByteArray(string fileName) 
{
    string workingDirectory = Environment.CurrentDirectory;
    string fullPath = Path.Combine(workingDirectory, "Assets", $"{fileName}.jpg");
    using (Image img = Image.Load(fullPath))
    using (var ms = new MemoryStream()) 
    {
        // 替换PBM为JPEG格式保存
        img.SaveAsJpeg(ms);
        return ms.ToArray();
    }
}

若使用System.Drawing.Common库，可替换为img.Save(ms, ImageFormat.Jpeg)。

2. 前端修复：正确转换Uint8Array为Base64 #

前端createImageUrlFromByteArray方法错误直接拼接数组，需先完成Base64编码转换：

createImageUrlFromByteArray(): SafeUrl | null {
    if (!this.image) return null;
    
    // 将Uint8Array转为二进制字符串再编码为Base64
    const binaryString = String.fromCharCode(...this.image);
    const base64String = btoa(binaryString);
    const objectURL = `data:image/jpeg;base64,${base64String}`;
    
    return this.sanitizer.bypassSecurityTrustUrl(objectURL);
}

3. 模板优化（可选） #

避免重复执行转换逻辑，可将结果缓存到组件属性：

// 组件类新增属性
imageUrl: SafeUrl | null = null;

// 用setter监听image输入变化
@Input()
set image(value: Uint8Array | null) {
    if (value) {
        const binaryString = String.fromCharCode(...value);
        const base64String = btoa(binaryString);
        this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(`data:image/jpeg;base64,${base64String}`);
    } else {
        this.imageUrl = null;
    }
}

修改HTML模板：

<div>
  <p>{{name}}</p>
  <p>{{date}}</p>
  <p>{{studioName}}</p>
  <p>{{rateing}}</p>
  <img *ngIf="imageUrl" [src]="imageUrl" alt="{{name}}"/>
</div>

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