Kendo UI 网格 - 如何在 ng-template 中显示图像

Question

基本上我们有一个图像存在于我们网络服务器的 ./assets 文件夹中。

逻辑是：如果存在则在网格中显示患者图像，否则渲染默认图像0.jpg。

这是我的 Kendo UI 网格列，用于显示患者图像 - 如果它存在：

<kendo-grid-column>
  <ng-template kendoGridCellTemplate let-dataItem>                                  
    <img *ngIf="'./assets/profiles/patients/' + dataItem.PatientID + '.jpg'" src="{{ './assets/profiles/patients/' + dataItem.PatientID + '.jpg'}}" height="40" width="40" style="border-radius:30px;" alt="Patient Image"/>
 </ng-template>
</kendo-grid-column>

这里有一个结合逻辑的想法，渲染患者图像或默认图像：

<kendo-grid-column>
 <ng-template kendoGridCellTemplate let-dataItem>
  <img src="{{ './assets/profiles/patients/' + dataItem.PatientID + '.jpg' ? './assets/profiles/patients/' + dataItem.PatientID + '.jpg' :  defPatientImage}}" 
   height="40" width="40" style="border-radius:30px;" alt="Patient Image"/>
 </ng-template>
 </kendo-grid-column>

问题（在两个示例中）是它总是尝试显示患者图像。

所以我当然会收到类似这样的控制台错误：

 GET http://localhost:4200/assets/profiles/patients/789456.jpg 404 (Not Found)

注意：我的网格数据集中没有图像路径数据。现在我必须直接进入 assets 文件夹（这是一个原型）。

知道我的 ngIf 声明有什么问题吗？

谢谢。

Answer 1

我没有意识到解决方案真的很简单。我只需要 img 标签本身的 onerror 事件。

 <kendo-grid-column>
    <ng-template kendoGridCellTemplate let-dataItem>
        <img src="{{ './assets/profiles/patients/' + dataItem.PatientID + '.jpg' }}" 
                onerror=" this.src = './assets/profiles/patients/0.jpg' "
                height="40" width="40" style="border-radius:30px;" alt="Patient Image"/>                    
        </ng-template>
 </kendo-grid-column>

Kendo UI 网格 - 如何在 ng-template 中显示图像

Kendo UI grid - how to display an image in ng-template

angular

kendo-ui-angular2

kendo-ui-grid