11

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
  • 12,981
  • 8
  • 59
  • 68
Dominik
  • 143
  • 1
  • 1
  • 7

3 Answers3

22

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
  • 12,981
  • 8
  • 59
  • 68
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • 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
  • I would like to place the image in the table header, but moving the `` to the mat-header-cell doesn't work, do you know how to do this? – DavidMul Jun 01 '22 at 06:22
0
<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>

...will also work. Cheers.

keemsisi
  • 369
  • 3
  • 6
0

Actually your code is going to work with one change. I would like to share the answer for those who would like to use <mat-header-cell> <mat-cell> instead of <th><td> in their table.

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

Working Sample

Vanderwood
  • 163
  • 4
  • 13