Question

基本上，我们的Web服务器的./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

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

 <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

1 个答案: