Сетка Kendo UI - как отобразить изображение в ng-шаблоне - PullRequest
Новая
       35

Сетка Kendo UI - как отобразить изображение в ng-шаблоне

0 голосов
/ 14 сентября 2018

По сути, у нас есть изображения, которые существуют в папке ./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 утверждением?

спасибо.

1 Ответ

0 голосов
/ 14 сентября 2018

Я не понимал, насколько простым было решение на самом деле.Мне просто нужно было событие 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>
...