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

Question

我正在Spring Boot和mysql中创建一个带有后端的Web应用程序。我有一个带有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">