Angular 8: ternary operation for img src attribute?

Question

My data has a property "photo", which may be empty or contain a file name.

For example, "steve.jpg" or "" if steve has no photo.

In React JSX I could use a ternary operator on the value of "photo", but I don't know how to do it with Angular 8.

In know I could use 2 image tags with 2 ngIfs, but I'd like ot make it more dry. This doesn't work for me at all:

<img[attr.src]="person.photo !=='' ? '/assets/images/people/{{person.photo}}' : '/assets/images/people/missing-person.jpg'">

Answer 1

it's just [src] in angular, and the {{ }} syntax isn't valid in bindings. Only in interpolation, just access the variables like normal

<img [src]="person.photo !=='' ? '/assets/images/people/' + person.photo : '/assets/images/people/missing-person.jpg'">