我想采用 base64 字符串并用它来显示图像。
下面是 HTML 文件。我想使用 base64 字符串并在 img 标签中使用它:
<ion-content>
<ion-card>
<img src={{imageFileBinary}} />
<ion-card-header>
<form>
<ion-input id="myform" type="file" name="file" (change)="postMethod($event.target.files)"></ion-input>
</form>
<ion-card-title>Nick</ion-card-title>
</ion-card>
</ion-content>
我从 .ts 文件中获取 imageFileBinary。
下面是 .ts 文件:
export class MyprofilePage implements OnInit {
imageFileBinary;
userDetails: UserDetails;
constructor(private profileDetailService: ProfileDetailsService, private httpClient: HttpClient) {}
fileToUpload;
getProfileDetails() {
this.profileDetailService.getUserDetails('email').subscribe((userDetails: UserDetails) => {
this.imageFileBinary = userDetails.imageFileBinary
});
}
postMethod(files: FileList) {
this.fileToUpload = files.item(0);
let formData = new FormData();
formData.append('file', this.fileToUpload, this.fileToUpload.name);
this.httpClient.post("http://localhost:8080/uploadFile", formData).subscribe((val)=> {
console.log(val);
});
return false;
}
ngOnInit() {
this.getProfileDetails();
}
}
How can I use the base64 String in the img tag?
最佳答案
尝试这个..
使用 javascript btoa 函数将图像二进制数据转换为 base64,并将其附加到 data uri 属性。
imageUrl; //rename imageFileBinary to imageUrl
let imageBinary = userDetails.imageFileBinary; //image binary data response from api
let imageBase64String= btoa(imageBinary);
this.imageUrl = 'data:image/jpeg;base64,' + imageBase64String;
最后用 Angular 数据绑定(bind)设置它
<img src={{imageUrl}} />
关于angular - 如何在 Angular 7 中显示 base64 图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57226912/