javascript - 如何在 Angular 8 中将 Base64 图像放在 mat-card 上

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">