如何在Angular中仅将指定动态数据的Base64转为图片

问题背景 #

现有一组动态加载的医疗数据，其中部分项（itemTitle为Graph1或Graph2）的itemValue是Base64格式的图片数据，其余项为普通文本值。需要在Angular页面中自动识别这类项，将图片数据渲染为图片，其他项保持文本展示。

现有代码参考 #

数据示例 #

[
  {
    "categoryId": 6,
    "itemTitle": "Evol",
    "itemValue": "68",
    "itemUnit": "",
    "displayOrder": 3,
    "isActive": true,
    "isDeleted": false,
    "createdDate": "2022-09-22T22:08:34.1190159",
    "createdBy": 1,
    "patientId": 3209,
    "categoryName": "Lungs"
  },
  {
    "categoryId": 6,
    "itemTitle": "Graph1",
    "itemValue": "data:image/jpg;base64,/xyz",
    "itemUnit": "",
    "displayOrder": 3,
    "isActive": true,
    "isDeleted": false,
    "createdDate": "2022-09-22T22:08:34.1222285",
    "createdBy": 1,
    "patientId": 3209,
    "categoryName": "Lungs"
  }
]

当前HTML渲染代码 #

<div class="row">
  <div *ngFor="let item of hubxReport.hubxDataItems" class="col-sm-4">
    <mat-form-field class="example-full-width lineheight25 fontsize">  
      <input class="fontsize" matInput autofocus placeholder={{item.itemTitle}}>{{item.itemValue}}&nbsp;{{item.itemUnit}}
    </mat-form-field>
  </div>
</div>

数据模型 #

export class HubxDataModel{ 
  categoryId:number;
  categoryName:string;
  displayOrder: number;
  HubxDataItems:HubxModel[]; // 注：原代码需修正为数组类型，否则无法循环
}
export class HubxModel{ 
  id: number;
  categoryId: number;
  itemTitle: string;
  itemUnit: string;
  isActive: boolean=true;
  itemValue: string;
  patientId: number;
  displayOrder : number;
  isDeleted: boolean;
}

解决方案 #

1. 修改HTML模板，添加条件渲染 #

利用Angular的*ngIf指令判断itemTitle类型，分别渲染图片或文本：

<div class="row">
  <div *ngFor="let item of hubxReport.hubxDataItems" class="col-sm-4">
    <mat-form-field class="example-full-width lineheight25 fontsize">
      <input class="fontsize" matInput autofocus [placeholder]="item.itemTitle">
      <!-- 渲染图片项 -->
      <img *ngIf="item.itemTitle === 'Graph1' || item.itemTitle === 'Graph2'" 
           [src]="item.itemValue" 
           alt="{{item.itemTitle}}" 
           style="max-width: 100%; height: auto;">
      <!-- 渲染文本项 -->
      <span *ngIf="item.itemTitle !== 'Graph1' && item.itemTitle !== 'Graph2'">
        {{item.itemValue}}&nbsp;{{item.itemUnit}}
      </span>
    </mat-form-field>
  </div>
</div>

2. 可选：封装判断逻辑到组件方法 #

如果后续需要扩展更多图片类型标题，可将判断逻辑抽到组件类，简化模板：

组件类添加方法

isGraphItem(item: HubxModel): boolean {
  return ['Graph1', 'Graph2'].includes(item.itemTitle);
}

修改模板调用方法

<div class="row">
  <div *ngFor="let item of hubxReport.hubxDataItems" class="col-sm-4">
    <mat-form-field class="example-full-width lineheight25 fontsize">
      <input class="fontsize" matInput autofocus [placeholder]="item.itemTitle">
      <img *ngIf="isGraphItem(item)" 
           [src]="item.itemValue" 
           alt="{{item.itemTitle}}" 
           style="max-width: 100%; height: auto;">
      <span *ngIf="!isGraphItem(item)">
        {{item.itemValue}}&nbsp;{{item.itemUnit}}
      </span>
    </mat-form-field>
  </div>
</div>

3. 模型修正（必要） #

原HubxDataModel中的HubxDataItems需定义为数组类型（HubxModel[]），否则*ngFor无法遍历，修正后的模型已在上方列出。

关键说明 #

• Angular的[src]属性可直接识别Base64格式图片数据，无需额外转换；
• 互斥的*ngIf判断确保同一项只渲染图片或文本；
• 封装判断方法后，新增图片类型只需修改数组内容，维护更便捷。

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