如何从server - ionic加载图像

a7qyws3x  于 2023-06-27  发布在  Ionic
关注(0)|答案(1)|浏览(133)

由于某种原因,当我在一些模拟器中打开应用程序时,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>
oyt4ldly

oyt4ldly1#

你的url格式应该是

this.imageUrl ="data:image/png;base64,"+base64Image;

相关问题