How to convert base64 data into image-CodePudding

I have a dynamic data and i want few of the data to convert into image. Below is my data

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

And this is how i show in my UI

And this is the html code that i use to print this data

<div >
                    <div *ngFor="let item of hubxReport.hubxDataItems" >
                      <mat-form-field >  
                        <input  matInput autofocus placeholder={{item.itemTitle}}>{{item.itemValue}}&nbsp;{{item.itemUnit}}
                      </mat-form-field>
                    </div>

And this is my Model

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

And this is how i call my data from API

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

My question is Fev6,PEF,PEFT...Graph 1 and Graph 2 which is shown in the image is under itemtitle and image data is under itemvalue this are dynamic data. So whenever itemTitle prints graph 1 and graph 2 i want only their itemvalue data which is base64 data to convert into image.How can i acheive that.

CodePudding user response：

Since, as per your question, you know when to show the image, you can use the HTML img tag and together with help from DomSanitizer, to display image when itemTitle is in ['Graph 1', 'Graph 2'].

html file -

<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 file -

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

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

StackBlitz link - https://stackblitz.com/edit/angular-mfzhqq