我正在 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.
斯蒂芬大帝
相关分类