在 Angular 中通过 Typescript 模型显示图像

Question

我的Angular (v8) 项目中有一个个人资料页面，通常我使用以下方法来显示用户照片：

<img class="profile-user-img" src="./DemoController/GetPhoto?Id={{rec.Id}}" />

但是，我认为还有另一种方法可以通过 model.ts 绑定图像，该图像已经从数据库中填充为其他字段。通过这样做，我只需向数据库发送一个请求而不是两次，并且照片数据将包含在model.ts 中。那么，我该怎么做呢？渲染前是否需要特殊的转换图像数据？

注意： 我使用byte[] 作为C# 端照片的数据类型。有什么想法吗？

这是我的模型。 ts如下：

export interface IUserProfile {
    Id: number;
    Photo: string | ArrayBuffer;
    NameSurname: string;
}

Answer 1

我认为您可以只使用字节数组来填充img.src 属性。 在您的组件模板中您可以编写如下：

<img class="profile-user-img" src="data:image/gif;base64,{{Profile.Photo}}" />

您在组件中的哪个位置：

@Component({})
export class User {
  Profile: UserProfile;
}