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

我正在 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.


噜噜哒
浏览 116回答 1
1回答

斯蒂芬大帝

你可以试试以下import { DomSanitizer } from '@angular/platform-browser';export class ToysComponent implements OnInit {&nbsp; constructor(private toyService: ToyService, private router: Router, private sanitizer: DomSanitizer) { }&nbsp; public castingImages(toys: Toy[]) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; for (let i = 0; i < toys.length - 1; i++) {&nbsp;&nbsp; &nbsp; &nbsp; toys[i].picture = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64, ' + toys[i].picture);&nbsp; &nbsp; }&nbsp; }}在模板中,您可以调用该函数来清理 url<img mat-card-image [src]="card.picture">
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript