Визуализация изображения Base64 в строке таблицы данных ngx

Мне нужно показать значок в строке данных ngx. Я получаю строки с сервера и привязываюсь к пользовательскому интерфейсу, а значок я получаю в формате base64, мне нужно поместить его в формате ниже.

Как я могу поместить соответствующий значок в свой собственный столбец в таблице данных ngx? как я могу это отфильтровать?

Это мое мнение, я отображаю столбцы из файла ts и перебираю html с помощью ngfor.

<ngx-datatable class="material ml-0 mr-0" [rows]="rows" [columns]="columns"     [loadingIndicator]="loadingIndicator" [columnMode]="ColumnMode.force" [headerHeight]="50"
  [footerHeight]="50" rowHeight="auto" [externalPaging]="true" [count]="page.totalElements" [offset]="page.pageNumber"
  [limit]="page.size" (page)="setPage($event)" [selected]="selected" [selectionType]="SelectionType.checkbox"  [scrollbarH]="true" 
  [selectAllRowsOnPage]="false" [rowHeight]="50">
  <ngx-datatable-column
  [width]="30"
  [sortable]="false"
  [canAutoResize]="false"
  [draggable]="false"
  [resizeable]="false"
  [headerCheckboxable]="true"
  [checkboxable]="true" *ngIf ="this.data.selection"
></ngx-datatable-column>
<ngx-datatable-column  name="Actions"  [width]="100" color="accent" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" >
  <ng-template let-row="row" ngx-datatable-cell-template>
    <button mat-icon-button [matMenuTriggerFor]="msgMenu" class="edit-row" (click)="$event.stopPropagation()" class="hidden-on-open">
      <mat-icon class="text-muted">more_vert</mat-icon>
    </button>
    <mat-menu #msgMenu="matMenu">
      <button mat-menu-item mat-sm-button  class="mr-16" (click)="openEditDialog(row)"><mat-icon color="primary">edit</mat-icon> Edit</button>
      <button mat-menu-item mat-sm-button  class="mr-16"  (click) = "openCopyDialog(row)" ><mat-icon color="info">content_copy</mat-icon> Copy</button>
      <button mat-menu-item mat-sm-button   (click) = "openDeleteDialog(row)" ><mat-icon color="warn">delete</mat-icon> Delete</button>
    </mat-menu>
   
  </ng-template>
</ngx-datatable-column>
  <ngx-datatable-column *ngFor="let col of columns" [name]="col.name" [prop]="col.prop">
  </ngx-datatable-column> here

person Kerim Balayev    schedule 30.06.2021    source источник


Ответы (1)


Просто поместите свой URL-адрес base64 в src изображения, проверьте фрагмент ниже.

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAA..." />

<img src="data:image/jpeg;base64, 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" />

person Hoch    schedule 30.06.2021
comment
то есть я знаю. я просто пока не могу понять, где определить, что именно эта строка будет изображением. как видите, я использую ngfor для получения всех столбцов и значения привязки, но только для одного имени столбца мне нужно добавить изображение. ‹ngx-datatable-column *ngFor=let col of columns [name]=col.name [prop]=col.prop› ‹/ngx-datatable-column› - person Kerim Balayev; 30.06.2021
comment
Хм, вы можете предоставить какой-нибудь код в stackblitz, чтобы я мог помочь? - person Hoch; 30.06.2021
comment
На данный момент я просто воссоздал столбцы ниже, и они работают, те, у кого нет значка, я повторяю и показываю. ‹ngx-datatable-column name=Значок категории› ‹ng-template let-row=row ngx-datatable-cell-template› ‹img src=data:image/png;base64,{{row.categoryIcon}} alt=Значок class=category-icon /› ‹/ng-template› ‹/ngx-datatable-column› Однако при привязке base64 к изображению я получаю проблему с безопасностью, а в html idk еще как ее дезинфицировать. - person Kerim Balayev; 01.07.2021
comment
Проверьте канал, созданный этим парнем, и исправление Гюнтера: значение"> stackoverflow.com/questions/43141534/ - person Hoch; 01.07.2021