在图像URL中使用西班牙语字符时出现问题

我的Angular6应用程序中有一个表格,显示服务的内容。在表中,我有两列使用完全相同的属性。 {{standing.teamName}}

第一列将工作组名称显示为文本,工作正常。 例如:

    <ng-container matColumnDef="Equipo">
      <th mat-header-cell *matHeaderCellDef>Equipo</th>
      <td mat-cell *matCellDef="let standing">{{standing.teamName}}</td>
    </ng-container>

第二列使用完全相同的值对img源进行参数化。

<ng-container matColumnDef="img">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let standing"><div><img mat-card-avatar src="../../assets/Flags/{{standing.teamName}}.png" alt=""></div></td>
    </ng-container>

在这种情况下,我得到的问题是: 得到 http://localhost:4200/assets/Flags/Espa%C3%B1a.png 404(未找到)

我试着用espa%c3%b1a.png命名文件,看看是否能找到它。

我对重音符号和其他西班牙字符也有同样的问题,我不明白为什么它在一个字符中有效,但在另一个字符中无效。