代码之家 › 专栏 › 技术社区 › bob.mazzo

剑道UI网格-如何在ng模板中显示图像

kendo-ui-grid kendo-ui-angular2 angular

1

bob.mazzo · 技术社区 · 7 年前

./assets 我们的web服务器的文件夹。

逻辑是:在网格中显示患者图像(如果存在),否则渲染默认图像 0.jpg

<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 声明?

谢谢。

1 回复 | 直到 7 年前

1

2

bob.mazzo 7 年前

我不知道这个解决办法到底有多简单。我只是需要那个 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>