Question

我正在从mongodb中检索数据，并尝试将其显示在有角度的材质表中，其中的数据之一是图像路径。我不知道如何将其绑定到有角度的材料表中

我试图将图像路径绑定到角度材质表。这就是控制台中的内容 WARNING: sanitizing unsafe style value background-image:url(C:\fakepath\short photo.jpeg) (see http://g.co/ng/security#xss).


<ng-container matColumnDef="image">
   <th mat-header-cell *matHeaderCellDef mat-sort-header> Thumbnail Image</th>
   <td mat-cell *matCellDef="let book" style="background-image:url({{book.image}})"></td>
</ng-container>

我想将图像路径绑定到表td并将其显示在表中

Answer 1

我认为这段代码将帮助您获得解决方案。

<ng-container matColumnDef="images">
  <th mat-header-cell *matHeaderCellDef> Images </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{'background-image':'url('+ element.images +')','background-size':'cover'}"></td>
</ng-container>

也请检查stackblitz链接：

https://stackblitz.com/edit/angular-6prp2u?file=src%2Fapp%2Fapp.component.html

如果您认为使用DomSanitizer：

构造函数：

constructor(private sanitizer: DomSanitizer) {}

URL：

this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl("URL");

角度材料表中的角度7图像显示

1 个答案: