由于某种原因,当我在一些模拟器中打开应用程序时,qrcode图像不显示,但在浏览器中正常显示。
这个问题怎么解决?
我尝试使用Axios来解决这个问题,但它也只显示在浏览器中。
是否有其他方法来解决这个图像加载或代码不完整或不正确?
import { Component, OnInit } from '@angular/core';
import { SafeUrl } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
styleUrls: ['./qrcode.component.scss'],
})
export class QrcodeComponent implements OnInit {
imageUrl: SafeUrl = '';
constructor(private http: HttpClient) { }
ngOnInit() {
this.loadQrCode()
}
loadQrCode() {
this.http.get('ENDPOINT', {
headers: {
"Content-Type": "application/json",
},
responseType: 'blob'
})
.subscribe(response => {
const reader = new FileReader();
reader.onloadend = () => {
const base64Image = reader.result as string;
this.imageUrl = base64Image;
};
reader.readAsDataURL(response);
});
}
}
<ion-card>
<ion-card-header>
<ion-card-title>QrCode</ion-card-title>
<ion-card-content>
<img [src]="imageUrl" width="200" height="200">
</ion-card-content>
</ion-card-header>
</ion-card>
1条答案
按热度按时间oyt4ldly1#
你的url格式应该是