Angular Material 14表格无法插入图片问题求助

你的问题出在属性绑定的语法错误，而非img不能嵌套在表格内。Angular Material表格的单元格完全支持放置图片元素，只需修正以下两点：

1. 修正[src]的绑定写法 #

错误写法：[src]="{{element.imageUrl}}"
正确写法：直接使用表达式绑定，无需嵌套插值语法{{}}：

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

2. 确保表格整体结构完整 #

检查你的mat-table是否包含必要的结构节点，完整示例如下：

<table mat-table [dataSource]="yourDataSource">
  <!-- 图片列定义 -->
  <ng-container matColumnDef="ImageUrl">
    <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
    <mat-cell *matCellDef="let element"> 
      <img [src]="element.imageUrl" alt="item image" style="width: 40px; height: 40px;" />
    </mat-cell>
  </ng-container>

  <!-- 其他列定义... -->

  <!-- 表头行 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <!-- 数据行 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>

之前的错误提示是因为模板解析器无法识别错误的绑定语法，从而抛出了误导性的结构错误。修正语法后，图片就能正常显示在Material表格中。

内容的提问来源于stack exchange，提问作者bilpor