如何将base64数据转换成图像

Question

我有一个动态数据，我希望很少的数据转换成图像。以下是我的数据

{
          "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"
        },

这就是我在UI中的表现

​

这是我用来打印数据的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>

这是我的模型

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;
    }

这就是我如何从API调用我的数据

getHubxReport() {
    this.clientService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
      if (response != null && response.data != null && response.data.length > 0) {
        this.hubxReportList = response.data;
      }
    }
    );
   
  }

我的问题是Fev6，PEF，PEFT...Graph 1和图2，它显示在项目标题下，图像数据在项目值下面，这是动态数据。因此，每当itemTitle输出图1和图2时，我只想要它们的项目值数据(即base64数据)转换为image.How，就可以做到这一点。

Answer 1

因为，根据您的问题，您知道什么时候显示图像，您可以使用HTML img标记和来自DomSanitizer的帮助来显示itemTitle在['Graph 1', 'Graph 2']中的图像。

html文件-

<ng-container [ngSwitch]="item.itemTitle">
  <img
    *ngSwitchCase="
      ['Graph 1', 'Graph 2'].includes(item.itemTitle)
        ? item.itemTitle
        : !item.itemTitle
    "
    [src]="sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)"
    [alt]="item.itemTitle"
  />
  <span *ngSwitchDefault>{{ item.itemValue }}</span>
</ng-container>

ts档案-

import { DomSanitizer } from '@angular/platform-browser';
...

export class MyComponent {
    ...
    constructor(public sanitizer: DomSanitizer) {...}
    ...
}

StackBlitz链接- https://stackblitz.com/edit/angular-mfzhqq