Image is not displayed in the table via ngFor-CodePudding

I have a table in which ngFor loops, all data is displayed as it should, but the picture is not, only its path. I understand that I myself put the path on the picture in a constant, but how do I do it correctly.

        <table mat-table [dataSource]="dataSource">
          <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
            <th  mat-header-cell *matHeaderCellDef>
              {{ column.header }}
            </th>
            <td mat-cell *matCellDef="let row">
              {{ column.cell(row) }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

I need the pictures to be displayed correctly

CodePudding user response：

You will need to use the HTML image tags <img> somewhere to display images.

CodePudding user response：

My Solution

        <table mat-table [dataSource]="dataSource">
      <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
        <th  mat-header-cell *matHeaderCellDef>
          {{ column.header }}
        </th>
        <td mat-cell *matCellDef="let row">
          {{ column.cell(row) }}
          <img *ngIf="column.columnDef == 'removeButton'"  src="assets/img/trash-icon.svg"/>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>