Angular如何获取ASP.NET Web API返回的图片并正常展示

• 之前手动转base64报错属于多此一举：ASP.NET Web API 4.7默认用Newtonsoft.Json做JSON序列化，本身就会自动把byte[]类型转成标准base64字符串返回，你手动再转一次等于重复编码，格式直接出错，Swagger自然会报异常。
• 前端拿到的image字段本身就是序列化好的base64字符串，但你直接赋值给img的src属性时没加data:图片MIME类型;base64,前缀，浏览器识别不出这是图片资源，当然渲染失败。
• 你Angular里写的image: Byte[]类型定义错误，TypeScript没有内置Byte类型，接口返回的image值实际是字符串格式。

第一步：调整ASP.NET Web API端代码 #

MotorTestImgDTO类不用改动，删掉Controller里手动转base64的冗余代码，直接返回查询结果即可，序列化器会自动处理byte[]到base64的转换：

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MotorTestImgController : ApiController
{
    private NavEcommerceDBfirstEntities db = new NavEcommerceDBfirstEntities();

    public IHttpActionResult Get()
    {
        // 加ToList()执行查询，避免EF延迟加载、序列化代理类的问题
        var allMotorImgs = db.Motorcycles
            .Select(m => new MotorTestImgDTO
            {
                Image = m.Image
            }).ToList();

        return Ok(allMotorImgs);
    }
}

注意：提前确认你数据库存储的图片格式，如果是png格式后续前缀用image/png，如果是jpg/jpeg就用image/jpeg，以下示例以常用的jpeg格式举例。改完重启接口，Swagger里看到返回的image字段是一长串base64字符串就代表后端正常了。

第二步：调整Angular端代码 #

1. 先修正Model的类型定义：

export interface MotorTestImage {
    image: string;
}

2. Service层无需大改，保持原有逻辑即可：

@Injectable({
  providedIn: 'root'
})
export class MotorTestImgService {
  imageUrl = 'https://localhost:*****/api/MotorTestImg';
  constructor(private http: HttpClient) { }

  getAllMotorsTestImg(): Observable<MotorTestImage[]> {
    return this.http.get<MotorTestImage[]>(this.imageUrl);
  }
}

3. 修改组件逻辑，拿到接口数据后给每个base64字符串拼接浏览器可识别的资源前缀：

import { Component, OnInit } from '@angular/core';
import { MotorTestImage} from './Model/motor-test-img.model';
import {MotorTestImgService} from './Service/motor-test-img.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  implements OnInit {
  title = 'AngularUI';
  motorTestImg: MotorTestImage[] = [];
  // 替换成你实际存储的图片MIME类型
  readonly imgPrefix = 'data:image/jpeg;base64,';

  constructor(private motorTestImgService: MotorTestImgService) {}

  ngOnInit(): void{
    this.allMotorsImgsTest();
  }

  allMotorsImgsTest(){
    this.motorTestImgService.getAllMotorsTestImg().subscribe(
      response => {
        this.motorTestImg = response.map(item => ({
          ...item,
          image: this.imgPrefix + item.image
        }));
      }
    ) 
  }
}

如果遇到Angular安全策略拦截base64资源的情况，在构造函数注入private sanitizer: DomSanitizer，把拼接好的图片地址用this.sanitizer.bypassSecurityTrustUrl(拼接后的地址)包一下再赋值即可，本地调试一般不会触发这个问题。

4. 最后调整模板，用Angular属性绑定方式绑定src更稳妥：

<h4>{{title}}</h4>
<div *ngFor="let item of motorTestImg">
    <img [src]="item.image" alt="摩托图片" />
</div>

改完后重启后端接口、刷新前端页面，检查浏览器Network面板里接口返回的image字段为纯base64字符串，img标签的src属性带完整的data前缀，图片即可正常渲染。这种实现方式不需要处理复杂的Blob逻辑，逻辑简单适配你当前的技术栈，不容易出问题。

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