如何在 Angular 8 中将 base64 图像放在垫卡上

Question

我正在 Spring Boot 和 mysql 中制作一个带有后端的 Web 应用程序。我有一个带有 Lob 属性的模型，它以 base64 格式存储图像（来自前端）。现在我想带上那个模型并将它的数据放在一张垫卡上。我得到了其他属性，但不是图像。这是我的 TSimport { 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">