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.
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.
<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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.