I would create a pipe, so you write once the code and then just add it to any HTML file, especially if you are going to use this feature in more components. Moreover, it is easier to modify/extend in the future, as you only have to modify in one place.

I leave HERE a stackblitz with the code, but it would be just something like this:

A) For using it in any HTML file (just add | bankNameImagePipe):

<img height='26' width='22' [src]="bank.bankName | bankNameImagePipe" />

B) Pipe file:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'bankNameImagePipe',
})
export class BankNameImagePipe implements PipeTransform {

  transform(value: string): string {

    let urlBankImg: string = 'assets/images/';

    switch (value) {
      case 'a':
        urlBankImg+= 'a.png';
        break;
      case 'b':
        urlBankImg+= 'b.png';
        break;
      case 'c':
        urlBankImg+= 'c.png';
        break;
      case 'd':
        urlBanckImg+= 'd.png';
        break;

      default:
        urlBankImg= 'default.png'; // You can add a 'default' image url here
        break;
    }

    return urlBankImg;
  }
}

NOTE: I assume that bank.bankName will be a string and not an array. If it were not a string, you would have to change the pipe appropriately.

HOW TO CREATE THE PIPE? You only need to type this command in your console/bash to create a pipe:

ng g pipe pipes/bankNameImage

ng means Angular CLI g means Generate pipes means the folder where you want the pipe to be bankNameImage means the pipe name (the one to be used for using the pipeline in HTML)

Then, you only have to fill the empty template code that this command will have created in the file bank-name-image.pipe.ts with the code I provided above.

I'll try answering the question (Instead of telling you what would i do). No, you can't use ngSwitch instead without repeating the whole img tag. Each ngSwitchCase will display/hide an element. That's how the ngSwitch syntax works:

https://angular.io/api/common/NgSwitchCase

So, the syntax for your labelling with ngSwitch would be something like:

  <ng-container [ngSwitch]="bank.bankName">
    <img *ngSwitchCase="'a'" src="/assets/a.svg" />
    <img *ngSwitchCase="'b'" src="/assets/b.svg" />
    <img *ngSwitchCase="'c'" src="/assets/c.svg" />
    <img *ngSwitchCase="'d'" src="/assets/d.svg" />
  </ng-container>

I've left a crude example here:

https://stackblitz.com/edit/angular-ivy-lmfttq?file=src/app/hello.component.html

That is how ngSwitch works in Angular templates.

Writing code in a chain of ternary operators is never really a good move, especially in HTML templates. The switch is fine and if you really want to avoid it, you can simply write this code in component.ts file and set an public imageSrc = '' named peropty, compute the result and assign it.

<div>
  <img height='26' width='22' [src]="imageSrc" />
</div>