Asociar valor JSON de Angular a ruta de imagen

Tengo que mostrar datos que provienen de una API que funciona bien, necesito mostrar cada país con su bandera correspondiente pero no entiendo cómo asociar el valor de un JSON con la ruta de una imagen.

ejemplo: para el

libelle: Camboya bigrama: KH

mostrar: src/assets/flags/KH.jpg

libelle: Francia bigramme: FR

mostrar: src/assets/flags/FR.jpg

He tratado de ser lo más claro posible.

gracias.

json

"drapeaux": [
    {
      "id": 1,
      "mnemo": "KHM",
      "libelle": "Cambodge",
      "bigramme": "KH"
    },
    {
      "id": 2,
      "mnemo": "KHM",
      "libelle": "France",
      "bigramme": "FR"
    }
  ]
}

servicio

getAll(): Observable<Ipost[]> {
    return this.http.get<Ipost[]>(this.api);
  }

componentes.ts

 getAllNations() {
    let resp = this.homeService.getAll();
    resp.subscribe(result => {
      this.postArray = result;
    });
  }

html

<div class="col-12">
      <mat-card>
        <div class="row">
          <div class="col-1" *ngFor="let post of postArray">
            {{post.libelle}}
            <img [src]="post.bigramme.jpg" alt="flag">
          </div>
        </div>
      </mat-card>
    </div>

Respuesta #1

Tienes dos opciones:

Opción 1: En su servicio:

getAll(): Observable<Ipost[]> {
  return this.http.get<Ipost[]>(this.api).pipe(
    map(p => ({
      ...p,
      bigramme: `src/assets/flags/${p.bigramme}.jpg`
    }))
  )
}

Y luego el HTML de tu componente:

<div class="col-12">
  <mat-card>
    <div class="row">
      <div class="col-1" *ngFor="let post of postArray">
        {{post.libelle}}
        <img [src]="post.bigramme" alt="flag">
      </div>
    </div>
  </mat-card>
</div>

Opción 2: O puedes cambiar solo el html de tu Componente:

<div class="col-12">
  <mat-card>
    <div class="row">
      <div class="col-1" *ngFor="let post of postArray">
        {{post.libelle}}
        <img src="src/assets/flags/{{ post.bigramme }}.jpg" alt="flag">
      </div>
    </div>
  </mat-card>
</div>