How i can display image or images in angular template which is received from Asp.Net Rest Api as a base64 string

I'm posting advertisement by using angular v14 and asp.net rest api,the posted advertisement is in db by using byte[] property in rest api as a binary data,i want to display that posted advertisement on home page of my project and i received & display all other things like name,description but i can't display image while i received it as base64string from rest api like that "/9j/4QKKRXhpZgAASUkqAAgAAAAIAA8BAgAHAAAAbgAAABABAgAWAAAAdgAAA...." & i received it in angular same as above.
**Here in .net rest api i'm converting it into base64string & sending it to angular template **

public static ImageModel ToModel(this AdvertisementImage entity)
        {
            return new ImageModel { Id = entity.Id, Base64Image = Convert.ToBase64String(entity.Contents) };
        }

It's Angular side template code

<div class="container-fluid">
  <div class="row">
    <div *ngFor="let adv of advs">
      <div class="col-12 col-sm-6 col-lg-3 col-xl-3">
        <a routerLink="details">
          <div class="card ">
            <div *ngFor="let img of adv.images">
              <img src="img.Base64Image" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <div class="heading">
                <h4 class="text-center">{{adv.name}}</h4>
              </div>
              <p class="card-text">
                {{adv.description}}
              </p>
            </div>
          </div>
        </a>
      </div>
    </div>

Component code

export class UserHomeComponent implements OnInit {
    advs: Advertisement[] = [];

  constructor(private advertisementService: AdvertisementsService) { }

  ngOnInit(): void {
    this.advertisementService.getAdvertisements().subscribe(data=>{
      for(let adv of data){
        for(let img of adv.images){
          console.log(img);
        }
      }
      this.advs = data;
    });
  }

To display the base64 image, you should provide the base64 string with the prefix: "data:{content/type};base64," as stated in the article, which {content/type} is the content type of the resource.

At the end, the value of src should be:

data:image/png;base64,{base64string}

Do note that [src] is applied with a square bracket as we want to pass the value as a variable, instead of a stringified value.

<img [src]="'data:image/image/png;base64,' + img.base64Image" class="card-img-top" alt="...">

Note that the property name is case-sensitive, if your JSON response returned is with camelCase, then your Base64Image should apply with camel case as well.

export interface Image {
  ...
  base64Image: string;
}

Demo @ StackBlitz