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

Question

Essentially we have a images which exists in the ./assets folder of our web server.

The logic is: display the patient image in the grid if it exists, otherwise render the default image 0.jpg.

Here's my Kendo UI grid column to show the patient image - IF IT EXISTS:

<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>

Here's an idea to combine the logic, render either patient image or the default image:

<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>

Problem (in both examples) is that it ALWAYS attempts to display the patient image.

So of course I get console errors something like this :

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

NOTE: I don't have the image path data in my grid data set. For now I have to go straight to the assets folder (this is a prototype).

Any idea what's wrong with my ngIf statement ?

thanks.

`'./assets/profiles/patients/' + dataItem.PatientID + '.jpg'` <-- that's a string. A string is truthy unless it's null or empty. Your ternary operator is always evaluating true. So is your *ngIf. This is not an answer because I don't know how to do a filesystem file-exists check from angular. :-/ — Roddy of the Frozen Peas, Sep 14 '18 at 16:08
I was thinking the same thing. I'll probably need some file utility to check if file exists. — bob.mazzo, Sep 14 '18 at 16:31
I mean, in *theory* you could use HttpClient or something and try to do a GET against your own host, but that would be silly so Id only use it as a temporary workaround until I found a more permanent solution (and only do so once in an OnInit or something.) — Roddy of the Frozen Peas, Sep 14 '18 at 16:35
so simple I felt so dumb - `onerror=" this.src = './assets/profiles/patients/0.jpg' "` — bob.mazzo, Sep 14 '18 at 18:20

score 2 · Accepted Answer · answered Sep 14 '18 at 18:19

I didn't realize how simple the solution really was. I just needed the onerror event on the img tag itself.

 <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 grid - how to display an image in ng-template

1 Answers1