7

I try to show an image in a cell of my Material table. Therefore I tried this code in my HTML File:

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.imageUrl}} </mat-cell>
  <img [src]="imageUrl" />
</ng-container>

Unfortunately, nothing appears in my Table.

Frederik Struck-Schøning
  • 11,909
  • 7
  • 55
  • 63
Dominik
  • 103
  • 1
  • 1
  • 6

1 Answers1

16

Give this a try:

<ng-container matColumnDef="imageUrl">
  <th mat-header-cell *matHeaderCellDef> Image Url </th>
  <td mat-cell *matCellDef="let element"> <img [src]="element.imageUrl" /> </td>
</ng-container>

Here's a Working Sample StackBlitz for your ref.

Frederik Struck-Schøning
  • 11,909
  • 7
  • 55
  • 63
SiddAjmera
  • 32,111
  • 5
  • 45
  • 85
  • 1
    Just add a class or add this style to the `img` tag selector : `img { width: 30px; height: 30px; }` I've updated the same in the Sample StackBlitz. Please have a look. – SiddAjmera Feb 09 '19 at 21:13