Как поместить изображение base64 на мат-карту в Angular 8

Question

Я делаю веб-приложение с бэкэндом при весенней загрузке и mysql. У меня есть модель с атрибутом Lob, которая хранит изображение в формате base64 (из внешнего интерфейса). Теперь я хочу принести эту модель и поместить ее данные на карточку. Я могу поставить другие атрибуты, но не изображение.

Вот мой TS

import { ToyService } from 'src/app/services/toy-service';
import { Toy } from 'src/app/services/models/toy';
import { Router } from '@angular/router';

@Component({
  selector: 'app-toys',
  templateUrl: './toys.component.html',
  styleUrls: ['./toys.component.css']
})
export class ToysComponent implements OnInit {

  toy = new Toy()
  toys = [];
  toysImages = [];
  imageUrl: string;


  image;



  constructor(private toyService: ToyService, private router: Router) { }

  ngOnInit() {
    this.loadToys();
  }



  public loadToys() {
    this.toyService.readPolicies().subscribe((toys: Toy[]) => {
      this.toys = toys;      
      this.castingImages(toys)
    })

  }
  //Here, i try to decode de base64 to a image
  public castingImages(toys: Toy[]) {    

    for (let i = 0; i < toys.length; i++) { 

        this.image = new Image()
        this.image.src = toys[i].picture;

        toys[i].picture = this.image.src      

    }
  }


  redirect() {
    this.router.navigate(['./toys']);
  }

}

А вот мой HTML

    <ng-container *ngFor="let card of toys">
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>{{card.id}}</mat-card-title>
                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
            </mat-card-header>



            <!-- And i want to do something like... -->
            <img mat-card-image
                src={{card.picture}}>



            <mat-card-content>
                <p>
                    {{card.name}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <button mat-button>LIKE</button>
                <button mat-button>SHARE</button>
            </mat-card-actions>
        </mat-card>
    </ng-container>

</div>
<mat-divider></mat-divider>```

Thank you so much.

Answer 1

Вы можете попробовать следующее

import { DomSanitizer } from '@angular/platform-browser';

export class ToysComponent implements OnInit {
  constructor(private toyService: ToyService, private router: Router, private sanitizer: DomSanitizer) { }

  public castingImages(toys: Toy[]) {    
    for (let i = 0; i < toys.length - 1; i++) { 
      toys[i].picture = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64, ' + toys[i].picture);
    }
  }
}

И в шаблоне вы можете вызвать функцию для очистки URL

<img mat-card-image [src]="card.picture">