concat sr c img с условием в angular

Question

Я пытаюсь показать изображение пользователей в шаблоне angular из вызова API. Поэтому, если изображение пустое, я покажу любое другое изображение, но если изображение пустое, я должен выполнить условие в sr c img:

 <img [src]="element.img!= null ? 'http://api.pointeuse.clediss.online/{{element.img}}' :
          'https://img2.freepng.fr/20180523/tha/kisspng-businessperson-computer-icons-avatar-clip-art-lattice-5b0508dc6a3a10.0013931115270566044351.jpg'"
          class="img-thumbnail border-0" />

проблема в том, что мне нужно объединить {{element.img}} с моим базовым URL

Answer 1

В вашем файле .component.ts сделайте это вычисляемое свойство одним из подходов

get elementImage(): string {
  if (this.element.image !== null) {
    return `http://api.pointeuse.clediss.online/${this.element.image}`
  } else {
    return 'https://img2.freepng.fr/20180523/tha/kisspng-businessperson-computer-icons-avatar-clip-art-lattice-5b0508dc6a3a10.0013931115270566044351.jpg'
}

в вашем шаблоне, это будет

<img [src]="elementImage" class="img-thumbnail border-0" />

Answer 2

Используйте метод get.

. html:

<img [src]="imageUrl"/>

.ts:

get imageUrl(): string {
   return this.element.img != null ? `some_url/${this.element.img}` : `other_url`;
}